omverse-ui 0.1.3 → 0.1.4
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 +205 -46
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,73 +1,232 @@
|
|
|
1
1
|
# omverse-ui
|
|
2
2
|
|
|
3
|
-
A modern React component library built with
|
|
3
|
+
> A modern, fully-typed React component library — 27 components built with Tailwind v4, TypeScript & CVA.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/omverse-ui)
|
|
6
|
+
[](https://www.npmjs.com/package/omverse-ui)
|
|
7
|
+
[](./LICENSE)
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- 🎨 **27 components** — buttons, inputs, modals, toasts, date pickers, and more
|
|
14
|
+
- 🌈 **Material Design 3** foundation with modern web-first variants
|
|
15
|
+
- 💅 **Tailwind v4** — design tokens, semantic colors, consistent spacing
|
|
16
|
+
- 🔷 **Fully typed** — TypeScript with complete prop intellisense
|
|
17
|
+
- 🌙 **Dark mode** ready
|
|
18
|
+
- ⚡ **Tree-shakeable** — only ship what you use
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 📦 Installation
|
|
8
23
|
|
|
9
24
|
```bash
|
|
10
25
|
npm install omverse-ui
|
|
11
26
|
```
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 🚀 Quick Setup
|
|
31
|
+
|
|
32
|
+
### Step 1 — Install Tailwind v4
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install tailwindcss @tailwindcss/vite
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Step 2 — Add Tailwind plugin to vite.config.ts
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import { defineConfig } from 'vite'
|
|
42
|
+
import react from '@vitejs/plugin-react'
|
|
43
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
44
|
+
|
|
45
|
+
export default defineConfig({
|
|
46
|
+
plugins: [
|
|
47
|
+
react(),
|
|
48
|
+
tailwindcss(),
|
|
49
|
+
],
|
|
50
|
+
})
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Step 3 — Update your index.css
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import "tailwindcss";
|
|
14
57
|
|
|
15
|
-
|
|
58
|
+
/* omverse-ui design tokens (colors, spacing, typography) */
|
|
59
|
+
@import "omverse-ui/styles";
|
|
60
|
+
|
|
61
|
+
/* Tell Tailwind to scan omverse-ui components for classes */
|
|
62
|
+
@source "../node_modules/omverse-ui/dist/index.js";
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Step 4 — Import CSS in main.tsx
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import React from 'react'
|
|
69
|
+
import ReactDOM from 'react-dom/client'
|
|
70
|
+
import './index.css' // ← must be here
|
|
71
|
+
import App from './App'
|
|
72
|
+
|
|
73
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
74
|
+
<React.StrictMode>
|
|
75
|
+
<App />
|
|
76
|
+
</React.StrictMode>
|
|
77
|
+
)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Step 5 — Add Toaster to your app root
|
|
81
|
+
|
|
82
|
+
> Required only if you use the `toast()` API.
|
|
16
83
|
|
|
17
84
|
```tsx
|
|
18
|
-
|
|
19
|
-
|
|
85
|
+
import { Toaster } from 'omverse-ui'
|
|
86
|
+
|
|
87
|
+
function App() {
|
|
88
|
+
return (
|
|
89
|
+
<>
|
|
90
|
+
<Toaster position="top-right" />
|
|
91
|
+
{/* rest of your app */}
|
|
92
|
+
</>
|
|
93
|
+
)
|
|
94
|
+
}
|
|
20
95
|
```
|
|
21
96
|
|
|
22
|
-
|
|
97
|
+
---
|
|
23
98
|
|
|
24
|
-
## Usage
|
|
99
|
+
## 🧩 Usage
|
|
25
100
|
|
|
26
101
|
```tsx
|
|
27
|
-
import { Button, Input, Card } from 'omverse-ui'
|
|
102
|
+
import { Button, Input, Badge, Avatar, Card, CardBody } from 'omverse-ui'
|
|
28
103
|
|
|
29
104
|
export default function App() {
|
|
30
105
|
return (
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
106
|
+
<div className="p-8 flex flex-col gap-4">
|
|
107
|
+
|
|
108
|
+
{/* Button variants */}
|
|
109
|
+
<div className="flex gap-2">
|
|
110
|
+
<Button variant="filled">Save</Button>
|
|
111
|
+
<Button variant="outlined">Cancel</Button>
|
|
112
|
+
<Button variant="tonal">Draft</Button>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
{/* Badges */}
|
|
116
|
+
<div className="flex gap-2">
|
|
117
|
+
<Badge color="success">Live</Badge>
|
|
118
|
+
<Badge color="warning">Beta</Badge>
|
|
119
|
+
<Badge color="error">Deprecated</Badge>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
{/* Input */}
|
|
123
|
+
<Input label="Email" placeholder="you@example.com" clearable />
|
|
124
|
+
|
|
125
|
+
{/* Avatar */}
|
|
126
|
+
<Avatar name="John Doe" size="md" />
|
|
127
|
+
|
|
128
|
+
{/* Card */}
|
|
129
|
+
<Card variant="elevated">
|
|
130
|
+
<CardBody>Hello from omverse-ui!</CardBody>
|
|
131
|
+
</Card>
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
)
|
|
36
135
|
}
|
|
37
136
|
```
|
|
38
137
|
|
|
39
|
-
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## 🔔 Toast
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { toast } from 'omverse-ui'
|
|
144
|
+
|
|
145
|
+
// Basic
|
|
146
|
+
toast('Hello world!')
|
|
147
|
+
|
|
148
|
+
// Types
|
|
149
|
+
toast.success('Profile saved!')
|
|
150
|
+
toast.error('Something went wrong')
|
|
151
|
+
toast.warning('This cannot be undone')
|
|
152
|
+
toast.info('A new version is available')
|
|
153
|
+
|
|
154
|
+
// Promise (shows loading → success/error automatically)
|
|
155
|
+
toast.promise(saveData(), {
|
|
156
|
+
loading: 'Saving...',
|
|
157
|
+
success: 'Saved successfully!',
|
|
158
|
+
error: 'Failed to save',
|
|
159
|
+
})
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## 📚 Components
|
|
165
|
+
|
|
166
|
+
### Form
|
|
167
|
+
| Component | What it does |
|
|
168
|
+
|---|---|
|
|
169
|
+
| `Button` | 6 variants · 5 sizes · loading · icon support |
|
|
170
|
+
| `IconButton` | Icon-only button · fab · toggle · badge |
|
|
171
|
+
| `Input` | Text · textarea · password · clearable · copyable |
|
|
172
|
+
| `Select` | Single/multi · searchable · grouped options |
|
|
173
|
+
| `Checkbox` | 6 colors · indeterminate · card style · group |
|
|
174
|
+
| `Radio` | Default · card · button · segmented · group |
|
|
175
|
+
| `Switch` | 6 colors · icon labels · card style |
|
|
176
|
+
| `Slider` | 4 thumb styles · range · vertical · marks |
|
|
177
|
+
| `DatePicker` | 4 variants · range · dual month · time picker |
|
|
40
178
|
|
|
41
|
-
|
|
179
|
+
### Display
|
|
180
|
+
| Component | What it does |
|
|
42
181
|
|---|---|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
|
52
|
-
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
182
|
+
| `Badge` | 4 variants · 6 colors · dot · pulse |
|
|
183
|
+
| `Avatar` | 6 sizes · circle/square · group · status |
|
|
184
|
+
| `Chip` | 4 variants · 6 colors · selectable · group |
|
|
185
|
+
| `Spinner` | 9 variants · skeleton · overlay |
|
|
186
|
+
| `Progress` | Linear · circular · segmented · multi |
|
|
187
|
+
| `Divider` | 7 styles · label · icon · inset · chat date |
|
|
188
|
+
|
|
189
|
+
### Layout & Navigation
|
|
190
|
+
| Component | What it does |
|
|
191
|
+
|---|---|
|
|
192
|
+
| `Navbar` | 16 variants · sidebar · collapsible |
|
|
193
|
+
| `Breadcrumb` | 11 variants · collapsible · numbered steps |
|
|
194
|
+
| `Pagination` | 17 variants · dots · table · load more |
|
|
195
|
+
| `Tabs` | 9 variants · horizontal + vertical · step tabs |
|
|
196
|
+
| `Stepper` | 10 variants · horizontal + vertical · timeline |
|
|
197
|
+
|
|
198
|
+
### Feedback & Overlay
|
|
199
|
+
| Component | What it does |
|
|
200
|
+
|---|---|
|
|
201
|
+
| `Toast` | 8 types · 6 positions · promise · progress |
|
|
202
|
+
| `Dialog` | 5 types · sizes · command palette |
|
|
203
|
+
| `Tooltip` | 3 variants · 4 positions · rich content |
|
|
204
|
+
| `Popover` | 4 sides · 3 alignments · arrow |
|
|
205
|
+
|
|
206
|
+
### Content
|
|
207
|
+
| Component | What it does |
|
|
208
|
+
|---|---|
|
|
209
|
+
| `Card` | 6 variants · interactive · flip · media |
|
|
210
|
+
| `Accordion` | 10 variants · single/multiple · animated |
|
|
211
|
+
| `DropdownMenu` | Checkbox · radio · search · color picker · emoji |
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## ⚙️ Requirements
|
|
216
|
+
|
|
217
|
+
| Requirement | Version |
|
|
218
|
+
|---|---|
|
|
219
|
+
| React | 18+ |
|
|
220
|
+
| Tailwind CSS | v4 |
|
|
221
|
+
| TypeScript | Recommended |
|
|
222
|
+
| Vite | Recommended |
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
## 📄 License
|
|
72
227
|
|
|
73
228
|
MIT © Om
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
> Built with ❤️ using React, Tailwind v4, TypeScript and CVA.
|