ra-ui 1.0.1 → 1.0.2
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 +79 -61
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,86 +1,104 @@
|
|
|
1
1
|
# ra-ui
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**37 React Native components. Zero dependencies. One command.**
|
|
4
4
|
|
|
5
|
-
Like [shadcn/ui](https://ui.shadcn.com) but for React Native.
|
|
5
|
+
Like [shadcn/ui](https://ui.shadcn.com) — but for React Native.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/ra-ui)
|
|
8
|
+
[]()
|
|
9
|
+
[]()
|
|
8
10
|
[](https://opensource.org/licenses/MIT)
|
|
9
11
|
|
|
10
12
|
**Website:** [ra-ui-rho.vercel.app](https://ra-ui-rho.vercel.app)
|
|
11
13
|
|
|
12
14
|
---
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Quick Start
|
|
15
17
|
|
|
16
18
|
```bash
|
|
17
|
-
#
|
|
19
|
+
# No install needed — just run:
|
|
18
20
|
npx ra-ui add button
|
|
19
21
|
|
|
20
|
-
# Or install globally
|
|
22
|
+
# Or install globally:
|
|
21
23
|
npm install -g ra-ui
|
|
22
24
|
ra-ui add button
|
|
23
25
|
```
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
**Output:**
|
|
28
|
+
```
|
|
29
|
+
● Added button
|
|
30
|
+
└─ src/components/ui/button.tsx
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
# Add a component to your project
|
|
29
|
-
ra-ui add button
|
|
32
|
+
✔ Done in 260ms
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
# ● Added button
|
|
33
|
-
# └─ src/components/ui/button.tsx
|
|
34
|
-
# ✔ Done in 260ms
|
|
34
|
+
Thanks for using ra-ui! Happy coding ✨
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
## Usage
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
40
|
import { Button } from "./components/ui/button";
|
|
41
41
|
|
|
42
|
-
<Button title="
|
|
43
|
-
<Button title="
|
|
44
|
-
<Button title="
|
|
42
|
+
<Button title="Default" onPress={() => {}} />
|
|
43
|
+
<Button title="Destructive" variant="destructive" onPress={() => {}} />
|
|
44
|
+
<Button title="Outline" variant="outline" onPress={() => {}} />
|
|
45
|
+
<Button title="Ghost" variant="ghost" onPress={() => {}} />
|
|
46
|
+
<Button loading onPress={() => {}} />
|
|
45
47
|
```
|
|
46
48
|
|
|
47
49
|
## Commands
|
|
48
50
|
|
|
49
51
|
| Command | Description |
|
|
50
52
|
|---|---|
|
|
51
|
-
| `ra-ui list` | Show all
|
|
52
|
-
| `ra-ui add <name>` | Add a component to your project |
|
|
53
|
-
| `ra-ui remove <name>` | Remove a component |
|
|
54
|
-
| `ra-ui add <name> --force` | Overwrite existing file |
|
|
55
|
-
|
|
56
|
-
## Components
|
|
57
|
-
|
|
58
|
-
| Component | Description |
|
|
59
|
-
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
53
|
+
| `npx ra-ui list` | Show all 37 components |
|
|
54
|
+
| `npx ra-ui add <name>` | Add a component to your project |
|
|
55
|
+
| `npx ra-ui remove <name>` | Remove a component |
|
|
56
|
+
| `npx ra-ui add <name> --force` | Overwrite existing file |
|
|
57
|
+
|
|
58
|
+
## All 37 Components
|
|
59
|
+
|
|
60
|
+
| # | Component | Description |
|
|
61
|
+
|---|---|---|
|
|
62
|
+
| 1 | `accordion` | Vertically stacked collapsible sections |
|
|
63
|
+
| 2 | `alert` | Callout for important messages |
|
|
64
|
+
| 3 | `alert-dialog` | Modal dialog expecting a response |
|
|
65
|
+
| 4 | `avatar` | Image with fallback initials |
|
|
66
|
+
| 5 | `badge` | Small status label |
|
|
67
|
+
| 6 | `breadcrumb` | Navigation path hierarchy |
|
|
68
|
+
| 7 | `button` | Button with 6 variants + loading |
|
|
69
|
+
| 8 | `calendar` | Date calendar picker |
|
|
70
|
+
| 9 | `card` | Container with header, content, footer |
|
|
71
|
+
| 10 | `carousel` | Swipeable content carousel |
|
|
72
|
+
| 11 | `checkbox` | Toggle checked/unchecked |
|
|
73
|
+
| 12 | `collapsible` | Expand and collapse content |
|
|
74
|
+
| 13 | `date-picker` | Date picker with calendar popup |
|
|
75
|
+
| 14 | `dialog` | Modal overlay with sections |
|
|
76
|
+
| 15 | `dropdown-menu` | Action menu from a button |
|
|
77
|
+
| 16 | `input` | Text input with label and error |
|
|
78
|
+
| 17 | `input-otp` | One-time password input |
|
|
79
|
+
| 18 | `label` | Accessible form label |
|
|
80
|
+
| 19 | `pagination` | Page navigation controls |
|
|
81
|
+
| 20 | `popover` | Floating content panel |
|
|
82
|
+
| 21 | `progress` | Progress bar indicator |
|
|
83
|
+
| 22 | `radio-group` | Single selection from options |
|
|
84
|
+
| 23 | `scroll-area` | Scrollable container |
|
|
85
|
+
| 24 | `select` | Dropdown option picker |
|
|
86
|
+
| 25 | `separator` | Horizontal/vertical divider |
|
|
87
|
+
| 26 | `sheet` | Bottom or side sliding panel |
|
|
88
|
+
| 27 | `skeleton` | Loading placeholder with pulse |
|
|
89
|
+
| 28 | `slider` | Range input with draggable thumb |
|
|
90
|
+
| 29 | `switch` | Animated toggle on/off |
|
|
91
|
+
| 30 | `table` | Responsive data table |
|
|
92
|
+
| 31 | `tabs` | Tabbed content sections |
|
|
93
|
+
| 32 | `textarea` | Multi-line text input |
|
|
94
|
+
| 33 | `toast` | Temporary notification |
|
|
95
|
+
| 34 | `toggle` | Two-state on/off button |
|
|
96
|
+
| 35 | `toggle-group` | Group of toggle buttons |
|
|
97
|
+
| 36 | `tooltip` | Popup on hover/press |
|
|
80
98
|
|
|
81
99
|
## Custom Output Path
|
|
82
100
|
|
|
83
|
-
|
|
101
|
+
Default: `src/components/ui/`. To change, add to `package.json`:
|
|
84
102
|
|
|
85
103
|
```json
|
|
86
104
|
{
|
|
@@ -92,26 +110,26 @@ By default, components are added to `src/components/ui/`. To change this, add to
|
|
|
92
110
|
|
|
93
111
|
## Why ra-ui?
|
|
94
112
|
|
|
95
|
-
- **Zero dependencies** — Only React Native core
|
|
96
|
-
- **You own the code** —
|
|
97
|
-
- **Zero config** — No init, no setup.
|
|
98
|
-
- **Blazing fast** —
|
|
113
|
+
- **Zero dependencies** — Only React Native core: Pressable, View, Text, StyleSheet, Animated
|
|
114
|
+
- **You own the code** — Copied into your project, not installed as a package
|
|
115
|
+
- **Zero config** — No init, no setup. One command and done
|
|
116
|
+
- **Blazing fast** — jsDelivr CDN with 200+ servers, installs in <500ms
|
|
99
117
|
- **TypeScript** — Every component is fully typed
|
|
100
118
|
- **Free forever** — Open source, no rate limits, no cost
|
|
101
119
|
|
|
102
120
|
## How It Works
|
|
103
121
|
|
|
104
122
|
```
|
|
105
|
-
ra-ui add button
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
Fetches from
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
Writes button.tsx into your project
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
You own the code. Edit anything.
|
|
123
|
+
npx ra-ui add button
|
|
124
|
+
|
|
|
125
|
+
v
|
|
126
|
+
Fetches from jsDelivr CDN (global, free)
|
|
127
|
+
|
|
|
128
|
+
v
|
|
129
|
+
Writes button.tsx into your project
|
|
130
|
+
|
|
|
131
|
+
v
|
|
132
|
+
You own the code. Edit anything.
|
|
115
133
|
```
|
|
116
134
|
|
|
117
135
|
## Links
|