omverse-ui 0.1.0
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 +73 -0
- package/dist/index.cjs +9244 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +2956 -0
- package/dist/index.d.ts +2956 -0
- package/dist/index.js +9182 -0
- package/dist/index.js.map +1 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# omverse-ui
|
|
2
|
+
|
|
3
|
+
A modern React component library built with **Tailwind v4**, **TypeScript**, and **CVA**.
|
|
4
|
+
|
|
5
|
+
27 components · Material Design 3 foundation · Web-first · Fully typed
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install omverse-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
Add the CSS to your app entry point:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// main.tsx
|
|
19
|
+
import 'omverse-ui/styles';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Make sure your project has Tailwind v4 configured.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Button, Input, Card } from 'omverse-ui';
|
|
28
|
+
|
|
29
|
+
export default function App() {
|
|
30
|
+
return (
|
|
31
|
+
<Card>
|
|
32
|
+
<Input label="Email" placeholder="you@example.com" />
|
|
33
|
+
<Button variant="filled">Get started</Button>
|
|
34
|
+
</Card>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
| Component | Variants |
|
|
42
|
+
|---|---|
|
|
43
|
+
| Button | filled, outlined, tonal, text, elevated, gradient |
|
|
44
|
+
| IconButton | filled, outlined, tonal, ghost, gradient, fab |
|
|
45
|
+
| Input | outlined, filled, underline · textarea · clearable |
|
|
46
|
+
| Badge | filled, outlined, tonal, ghost · 6 colors |
|
|
47
|
+
| Avatar | 6 sizes · circle/square · AvatarGroup |
|
|
48
|
+
| Chip | filled, outlined, tonal, ghost · ChipGroup |
|
|
49
|
+
| Checkbox | 6 colors · indeterminate · card style |
|
|
50
|
+
| Radio | default, card, button, segmented |
|
|
51
|
+
| Switch | 6 colors · icon labels |
|
|
52
|
+
| Select | single/multi · searchable · grouped options |
|
|
53
|
+
| Tooltip | 3 variants · 4 positions · rich tooltip |
|
|
54
|
+
| Spinner | 9 variants · Skeleton component |
|
|
55
|
+
| Card | 6 variants · interactive · flip card |
|
|
56
|
+
| Dialog | 5 types · CommandPalette |
|
|
57
|
+
| Toast | 8 types · 6 positions · promise support |
|
|
58
|
+
| Tabs | 9 variants · horizontal + vertical · StepTabs |
|
|
59
|
+
| Accordion | 10 variants · single/multiple |
|
|
60
|
+
| Progress | Linear · Circular · Segmented · Multi |
|
|
61
|
+
| DropdownMenu | checkbox · radio · search · avatar · color picker |
|
|
62
|
+
| Popover | 4 sides · 3 alignments · arrow |
|
|
63
|
+
| DatePicker | 4 calendar variants · range · dual month · time |
|
|
64
|
+
| Slider | 4 thumb styles · 4 track styles · range |
|
|
65
|
+
| Breadcrumb | 11 variants · collapsible · numbered steps |
|
|
66
|
+
| Pagination | 17 variants · dots · table · load more |
|
|
67
|
+
| Navbar | 16 variants · Sidebar · collapsible |
|
|
68
|
+
| Stepper | 10 variants · horizontal + vertical · timeline |
|
|
69
|
+
| Divider | 7 styles · label · icon · inset · chat date |
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT © Om
|