@yomologic/react-ui 0.3.1 → 0.4.1
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 +42 -59
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,97 +1,74 @@
|
|
|
1
1
|
# @yomologic/react-ui
|
|
2
2
|
|
|
3
|
-
A modern, lightweight React UI component library built with TypeScript and
|
|
3
|
+
A modern, lightweight React UI component library built with TypeScript and Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
> **📚 [View Full Documentation & Live Examples →](https://react-ui.yomologic.com/)**
|
|
4
6
|
|
|
5
7
|
## Features
|
|
6
8
|
|
|
7
|
-
- 🎨 **
|
|
9
|
+
- 🎨 **Themeable** - Built-in dark theme with CSS variables
|
|
10
|
+
- 🎯 **TypeScript** - Complete type safety
|
|
8
11
|
- 📦 **Tree-shakeable** - Import only what you need
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
- ♿ **Accessible** - Built with accessibility in mind
|
|
13
|
-
- 📱 **Responsive** - Mobile-first design patterns
|
|
12
|
+
- ⚡ **Framework-agnostic** - Works with Next.js, Remix, Vite, etc.
|
|
13
|
+
- ♿ **Accessible** - ARIA compliant
|
|
14
|
+
- 📱 **Responsive** - Mobile-first design
|
|
14
15
|
|
|
15
16
|
## Installation
|
|
16
17
|
|
|
17
18
|
```bash
|
|
18
|
-
# Using yarn
|
|
19
|
-
yarn add @yomologic/react-ui
|
|
20
|
-
|
|
21
|
-
# Using npm
|
|
22
19
|
npm install @yomologic/react-ui
|
|
20
|
+
# or
|
|
21
|
+
yarn add @yomologic/react-ui
|
|
23
22
|
```
|
|
24
23
|
|
|
25
|
-
##
|
|
24
|
+
## Quick Start
|
|
26
25
|
|
|
27
26
|
```tsx
|
|
28
|
-
import
|
|
27
|
+
import "@yomologic/react-ui/dist/base.css";
|
|
28
|
+
import "@yomologic/react-ui/dist/styles.css";
|
|
29
|
+
import { Button, Card, Input } from "@yomologic/react-ui";
|
|
29
30
|
|
|
30
31
|
function App() {
|
|
31
32
|
return (
|
|
32
33
|
<Card padding="lg">
|
|
33
|
-
<Input label="Email" type="email"
|
|
34
|
-
<Button variant="primary"
|
|
35
|
-
Submit
|
|
36
|
-
</Button>
|
|
34
|
+
<Input label="Email" type="email" />
|
|
35
|
+
<Button variant="primary">Submit</Button>
|
|
37
36
|
</Card>
|
|
38
37
|
);
|
|
39
38
|
}
|
|
40
39
|
```
|
|
41
40
|
|
|
42
|
-
## Components
|
|
43
|
-
|
|
44
|
-
### UI Components
|
|
45
|
-
|
|
46
|
-
- **Button** - Interactive buttons with variants (primary, secondary, outline, ghost, danger)
|
|
47
|
-
- **Input** - Text inputs with labels, icons, and validation states
|
|
48
|
-
- **Card** - Flexible container with variants and padding options
|
|
49
|
-
- **Badge** - Status indicators and labels
|
|
50
|
-
- **Checkbox** - Single checkboxes and checkbox groups
|
|
51
|
-
- **RadioGroup** - Radio button groups for single selections
|
|
52
|
-
- **Dropdown** - Select dropdowns with search and custom options
|
|
53
|
-
- **Spinner** - Loading indicators
|
|
54
|
-
- **CodeSnippet** - Syntax-highlighted code display with copy button
|
|
55
|
-
- **Dialog** - Modal dialogs with header, content, and footer sections
|
|
56
|
-
- **Divider** - Visual separators for content sections
|
|
57
|
-
|
|
58
|
-
### Feedback Components
|
|
59
|
-
|
|
60
|
-
- **Alert** - Contextual feedback messages (info, success, warning, error)
|
|
61
|
-
|
|
62
|
-
### Layout Components
|
|
63
|
-
|
|
64
|
-
- **Container** - Responsive page container with max-width constraints
|
|
65
|
-
- **SectionLayout** - Layout wrapper for documentation sections
|
|
66
|
-
- **Nav** - Navigation bar with mobile menu support (dropdown or drawer)
|
|
67
|
-
- **Drawer** - Slide-out drawer/sidebar for navigation
|
|
68
|
-
|
|
69
41
|
## Theming
|
|
70
42
|
|
|
71
|
-
|
|
43
|
+
Override CSS variables to customize the built-in dark theme:
|
|
72
44
|
|
|
73
45
|
```css
|
|
46
|
+
/* custom-theme.css */
|
|
74
47
|
:root {
|
|
75
48
|
--color-primary: #3b82f6;
|
|
76
|
-
--color-
|
|
77
|
-
--color-
|
|
78
|
-
--color-
|
|
79
|
-
--color-
|
|
80
|
-
|
|
49
|
+
--color-primary-hover: #2563eb;
|
|
50
|
+
--color-background: #ffffff;
|
|
51
|
+
--color-foreground: #111827;
|
|
52
|
+
--color-muted: #f3f4f6;
|
|
53
|
+
--color-border: #e5e7eb;
|
|
54
|
+
/* ...more variables */
|
|
81
55
|
}
|
|
82
56
|
```
|
|
83
57
|
|
|
84
|
-
|
|
58
|
+
Import your custom theme **after** the base styles:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import "@yomologic/react-ui/dist/base.css";
|
|
62
|
+
import "@yomologic/react-ui/dist/styles.css";
|
|
63
|
+
import "./custom-theme.css"; // Your overrides
|
|
64
|
+
```
|
|
85
65
|
|
|
86
|
-
|
|
66
|
+
## Documentation
|
|
87
67
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
- **Overlay (100-999)**: Dropdowns, popovers, drawers
|
|
91
|
-
- **Modal (1000-1999)**: Dialogs, tooltips
|
|
92
|
-
- **Notification (2000+)**: Toasts, snackbars
|
|
68
|
+
**Full documentation, live examples, and interactive demos:**
|
|
69
|
+
👉 **[react-ui.yomologic.com](https://react-ui.yomologic.com/)**
|
|
93
70
|
|
|
94
|
-
|
|
71
|
+
Browse all components, see code examples, and experiment with variants in our interactive showcase.
|
|
95
72
|
|
|
96
73
|
## Development
|
|
97
74
|
|
|
@@ -111,7 +88,13 @@ yarn type-check
|
|
|
111
88
|
|
|
112
89
|
## Contributing
|
|
113
90
|
|
|
114
|
-
|
|
91
|
+
Contributions are welcome! Feel free to:
|
|
92
|
+
|
|
93
|
+
- Report bugs or request features via [GitHub Issues](https://github.com/yomologic/react-ui/issues)
|
|
94
|
+
- Fork the repository and submit pull requests
|
|
95
|
+
- Improve documentation or add examples
|
|
96
|
+
|
|
97
|
+
For development documentation, see the implementation guides in the repository.
|
|
115
98
|
|
|
116
99
|
## License
|
|
117
100
|
|