@viliha/vui-ui 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# @viliha/vui-ui
|
|
2
|
+
|
|
3
|
+
A clean, **token-driven React admin/CRM component library** built on Tailwind
|
|
4
|
+
CSS v4, shadcn-style patterns, and Radix Icons. Ships as **TypeScript source**
|
|
5
|
+
(Just-in-Time) — your app's bundler compiles only what you import.
|
|
6
|
+
|
|
7
|
+
Part of [**Vui Starter**](https://github.com/myviliha/vui-starter) — a free,
|
|
8
|
+
open-source admin design system.
|
|
9
|
+
|
|
10
|
+
- 🌐 **Live docs & demo:** [vui.viliha.com](https://vui.viliha.com)
|
|
11
|
+
- 📦 **Repository:** [github.com/myviliha/vui-starter](https://github.com/myviliha/vui-starter)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @viliha/vui-ui # or: pnpm add / yarn add / bun add
|
|
17
|
+
npm install -D tailwindcss @tailwindcss/postcss
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
`react` and `react-dom` are peer dependencies.
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
**1. Import the theme** in your global stylesheet (design tokens, `@theme`
|
|
25
|
+
mapping, base reset, and component scanning — all in one import):
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
@import "tailwindcss";
|
|
29
|
+
@import "@viliha/vui-ui/theme.css";
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**2. Next.js only** — transpile the source package in `next.config.ts`:
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
const nextConfig = { transpilePackages: ["@viliha/vui-ui"] };
|
|
36
|
+
export default nextConfig;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
(Vite and most bundlers need no extra config.)
|
|
40
|
+
|
|
41
|
+
## Usage
|
|
42
|
+
|
|
43
|
+
Each component is its own entry point, so you only ship what you use:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { Button } from "@viliha/vui-ui/button";
|
|
47
|
+
import { Badge } from "@viliha/vui-ui/badge";
|
|
48
|
+
import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
|
|
49
|
+
|
|
50
|
+
export function Example() {
|
|
51
|
+
return (
|
|
52
|
+
<div className="p-4">
|
|
53
|
+
<Badge variant="success">Active</Badge>
|
|
54
|
+
<Button variant="primary">Save</Button>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Components
|
|
61
|
+
|
|
62
|
+
`avatar` · `badge` · `button` · `card` · `chart` (themed Recharts wrapper) ·
|
|
63
|
+
`checkbox` · `dialog` · `confirm-dialog` · `dropdown-menu` · `input` · `menu` ·
|
|
64
|
+
`select` · `table` · `record-view` (the full datatable) · plus the `utils`
|
|
65
|
+
(`cn`) helper and the `theme.css` design tokens.
|
|
66
|
+
|
|
67
|
+
## Theming
|
|
68
|
+
|
|
69
|
+
Every design decision lives in `@viliha/vui-ui/theme.css` as CSS variables
|
|
70
|
+
(colors, radius, typography, dark mode). Override any token **after** the import
|
|
71
|
+
to rebrand the whole system:
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
@import "@viliha/vui-ui/theme.css";
|
|
75
|
+
|
|
76
|
+
:root {
|
|
77
|
+
--primary: oklch(0.55 0.2 260);
|
|
78
|
+
--radius: 0.5rem;
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT © Suman Bonakurthi
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
Made with ♥ from Vietnam by the [Viliha Team](https://viliha.com).
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viliha/vui-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Suman Bonakurthi",
|
|
7
|
-
"homepage": "https://
|
|
7
|
+
"homepage": "https://vui.viliha.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
10
|
"url": "git+https://github.com/myviliha/vui-starter.git",
|