@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.
Files changed (2) hide show
  1. package/README.md +88 -0
  2. 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.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://github.com/myviliha/vui-starter/tree/main/packages/ui",
7
+ "homepage": "https://vui.viliha.com",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/myviliha/vui-starter.git",