@raydenui/ui 0.10.0 → 0.10.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 +124 -49
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,91 +6,166 @@
|
|
|
6
6
|
|
|
7
7
|
# Rayden UI
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
Pixel-perfect components from the [Rayna UI](https://www.raynaui.com/) design system.
|
|
9
|
+
React components, page blocks, icons, and design tokens for building product interfaces. Rayden's default **Citrionus** flavor is built with Tailwind CSS v4 and includes TypeScript definitions, light and dark themes, and opt-in motion.
|
|
11
10
|
|
|
12
11
|
[](https://www.npmjs.com/package/@raydenui/ui)
|
|
13
12
|
[](https://www.npmjs.com/package/@raydenui/ui)
|
|
14
13
|
[](https://opensource.org/licenses/MIT)
|
|
15
|
-
[](https://rayden-docs.vercel.app)
|
|
16
|
-
[](https://69b6d5e6cb6bbc778afec0ee-tcxvxzrkrt.chromatic.com/)
|
|
17
14
|
|
|
18
|
-
|
|
15
|
+
[Documentation](https://rayden-docs.vercel.app) · [Storybook](https://main--69b6d5d8527b4eddb882e0a7.chromatic.com) · [Source](https://github.com/playbookTV/Rayden)
|
|
19
16
|
|
|
20
|
-
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
In an existing React application:
|
|
21
20
|
|
|
22
21
|
```bash
|
|
23
|
-
|
|
22
|
+
npm install @raydenui/ui
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
React and React DOM 18 or later are required. Import the component stylesheet once in your app entry point or root layout. The optional font stylesheet serves bundled Hanken Grotesk and Manrope webfonts from your app.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import "@raydenui/ui/styles.css";
|
|
29
|
+
import "@raydenui/ui/fonts.css";
|
|
30
|
+
import { Badge, Button, Input, ThemeProvider } from "@raydenui/ui";
|
|
31
|
+
|
|
32
|
+
export default function App() {
|
|
33
|
+
return (
|
|
34
|
+
<ThemeProvider defaultTheme="system">
|
|
35
|
+
<main style={{ display: "grid", gap: 16, maxWidth: 400, padding: 24 }}>
|
|
36
|
+
<Input label="Email" type="email" placeholder="you@example.com" />
|
|
37
|
+
<Button variant="primary" size="lg">Subscribe</Button>
|
|
38
|
+
<Badge color="success">Active</Badge>
|
|
39
|
+
</main>
|
|
40
|
+
</ThemeProvider>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The package includes compiled component CSS. Configure Tailwind CSS v4 in your own app if you also want to generate utility classes for your layouts. In Next.js App Router, put interactive examples and providers in a client component with `"use client"`; import global styles from the root layout.
|
|
46
|
+
|
|
47
|
+
### Start a new project
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npx create-rayden-app@latest my-app
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Choose Vite or Next.js, TypeScript or JavaScript, and one of six starter templates: `blank`, `minimal`, `landing`, `dashboard`, `ecommerce`, or `blog`. Follow the CLI's printed next steps; it can install dependencies during setup.
|
|
54
|
+
|
|
55
|
+
For an explicit setup with npm:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npx create-rayden-app@latest my-app -f vite -t minimal --ts --pm npm --install
|
|
24
59
|
cd my-app
|
|
25
|
-
npm install
|
|
26
60
|
npm run dev
|
|
27
61
|
```
|
|
28
62
|
|
|
29
|
-
|
|
63
|
+
## Package imports
|
|
30
64
|
|
|
31
|
-
|
|
|
32
|
-
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
65
|
+
| Import | What it provides |
|
|
66
|
+
| --- | --- |
|
|
67
|
+
| `@raydenui/ui` | Components, theme providers and hooks, icon discovery, and utilities |
|
|
68
|
+
| `@raydenui/ui/blocks` | Ready-made application, account, marketing, and commerce blocks |
|
|
69
|
+
| `@raydenui/ui/icons` | Named static icon data such as `heartIcon` |
|
|
70
|
+
| `@raydenui/ui/chart` | `RaydenChart` and chart helpers |
|
|
71
|
+
| `@raydenui/ui/motion` | Motion primitives, presets, and recipes |
|
|
72
|
+
| `@raydenui/ui/preset` | Programmatic design tokens and the Tailwind preset |
|
|
73
|
+
| `@raydenui/ui/styles.css` | Compiled component styles and theme variables |
|
|
74
|
+
| `@raydenui/ui/fonts.css` | Optional bundled webfonts |
|
|
39
75
|
|
|
40
|
-
|
|
76
|
+
Charts require the optional `chart.js` and `react-chartjs-2` peers. The `useRaydenInput`, `useRaydenSelect`, and other form integration hooks require `react-hook-form`. Install these only when using the corresponding features:
|
|
41
77
|
|
|
42
78
|
```bash
|
|
43
|
-
|
|
79
|
+
npm install chart.js react-chartjs-2
|
|
80
|
+
# For React Hook Form integration:
|
|
81
|
+
npm install react-hook-form
|
|
44
82
|
```
|
|
45
83
|
|
|
46
|
-
|
|
47
|
-
|------|---------|
|
|
48
|
-
| `-f, --framework` | `vite` (recommended), `nextjs` |
|
|
49
|
-
| `-t, --template` | `blank`, `minimal`, `landing`, `dashboard`, `ecommerce`, `blog` |
|
|
50
|
-
| `--ts` / `--js` | TypeScript (default) or JavaScript |
|
|
51
|
-
| `--pm` | `npm`, `pnpm`, `yarn` |
|
|
84
|
+
## Components and blocks
|
|
52
85
|
|
|
53
|
-
|
|
86
|
+
- **Forms:** Button, ButtonGroup, Input, Select, Checkbox, Radio, Toggle, Chip, FileUpload, Counter, Slider, and DatePicker.
|
|
87
|
+
- **Navigation:** Tabs, Breadcrumb, Pagination, SidebarMenu, DropdownMenu, and Stepper.
|
|
88
|
+
- **Display and feedback:** Card, Table, Avatar, ActivityItem, ActivityContent, MetricsCard, Icon, EmptyStateIllustration, Alert, Badge, Banner, ProgressBar, ProgressCircle, Spinner, and Tooltip.
|
|
89
|
+
- **Layout:** Accordion, Divider, and Modal. Charts are available as `RaydenChart` from the chart subpath.
|
|
54
90
|
|
|
55
|
-
|
|
56
|
-
|
|
91
|
+
Import page blocks separately:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import { PageHeaderBlock } from "@raydenui/ui/blocks";
|
|
95
|
+
|
|
96
|
+
export function OverviewHeader() {
|
|
97
|
+
return (
|
|
98
|
+
<PageHeaderBlock
|
|
99
|
+
title="Overview"
|
|
100
|
+
description="A snapshot of your workspace activity."
|
|
101
|
+
/>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
57
104
|
```
|
|
58
105
|
|
|
59
|
-
|
|
106
|
+
The block library includes application shells, page headers, workspace switching, command palettes, login and account creation, profile settings, KPI overviews, task lists, tables, notifications, marketing sections, product browsing, carts, and checkout review. Blocks provide UI; connect their props and callbacks to your own data and services.
|
|
107
|
+
|
|
108
|
+
## Icons
|
|
109
|
+
|
|
110
|
+
Use a static data import for immediate rendering, including server rendering:
|
|
60
111
|
|
|
61
112
|
```tsx
|
|
62
|
-
import "@raydenui/ui
|
|
63
|
-
import {
|
|
113
|
+
import { Button, Icon } from "@raydenui/ui";
|
|
114
|
+
import { heartIcon } from "@raydenui/ui/icons";
|
|
115
|
+
|
|
116
|
+
export function FavoriteButton() {
|
|
117
|
+
return <Button icon={heartIcon} iconPosition="leading">Favorite</Button>;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export function FavoriteIcon() {
|
|
121
|
+
return <Icon icon={heartIcon} variant="solid" size={24} />;
|
|
122
|
+
}
|
|
123
|
+
```
|
|
64
124
|
|
|
65
|
-
|
|
125
|
+
`<Icon name="heart" />` supports dynamic name lookup and loads the icon registry after mounting. Pass either `name` or `icon`. Both `outline` and `solid` variants are available. The `iconCatalog` export lists exact registry names and static export names without SVG artwork.
|
|
126
|
+
|
|
127
|
+
Icons are decorative by default. Label icon-only controls on the control itself; a meaningful standalone icon needs `aria-hidden={false}`, `role="img"`, and an `aria-label`.
|
|
128
|
+
|
|
129
|
+
## Theme and motion
|
|
130
|
+
|
|
131
|
+
`ThemeProvider` supports `light`, `dark`, and `system`. Use `useTheme()` to read or change the selected theme.
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
import { MotionProvider, Pressable } from "@raydenui/ui/motion";
|
|
135
|
+
|
|
136
|
+
export function MotionExample() {
|
|
66
137
|
return (
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
<Badge color="success">Active</Badge>
|
|
71
|
-
</div>
|
|
138
|
+
<MotionProvider preset="snappy">
|
|
139
|
+
<Pressable>Continue</Pressable>
|
|
140
|
+
</MotionProvider>
|
|
72
141
|
);
|
|
73
142
|
}
|
|
74
143
|
```
|
|
75
144
|
|
|
76
|
-
|
|
145
|
+
Motion presets are `calm`, `snappy`, `playful`, and `reduced`. `Reveal`, `Collapse`, and `SharedLayout` provide additional primitives. Tabs and Modal require an explicit `motion` prop to animate. System reduced-motion preferences take precedence.
|
|
77
146
|
|
|
78
|
-
|
|
147
|
+
## AI and MCP
|
|
79
148
|
|
|
80
|
-
|
|
149
|
+
[`@raydenui/ai`](https://www.npmjs.com/package/@raydenui/ai) supplies component contracts, token references, icon discovery, usage validation, and the Rayden MCP server. The MCP server ships in that package; it does not require a separate MCP package.
|
|
81
150
|
|
|
82
|
-
|
|
151
|
+
For an MCP client that launches stdio servers, use command `npx` with arguments `-y` and `@raydenui/ai@latest`. To inspect the server from a terminal:
|
|
83
152
|
|
|
84
|
-
|
|
153
|
+
```bash
|
|
154
|
+
npx -y @raydenui/ai@latest --help
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
See the [AI package README](https://github.com/playbookTV/Rayden/tree/main/packages/rayden-ai#readme) for configuration and programmatic usage. The AI catalog identifies its reference UI version and supported components; it does not inspect your installed project automatically.
|
|
85
158
|
|
|
86
|
-
|
|
159
|
+
## Development
|
|
87
160
|
|
|
88
|
-
|
|
161
|
+
From a checkout with Node.js and pnpm installed:
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
pnpm install
|
|
165
|
+
pnpm storybook
|
|
166
|
+
```
|
|
89
167
|
|
|
90
|
-
|
|
91
|
-
- [Storybook](https://main--69b6d5d8527b4eddb882e0a7.chromatic.com) — Interactive component explorer
|
|
92
|
-
- [create-rayden-app](https://www.npmjs.com/package/create-rayden-app) — CLI scaffolding with 6 templates
|
|
93
|
-
- [@raydenui/ai](https://www.npmjs.com/package/@raydenui/ai) — MCP server for AI-assisted development
|
|
168
|
+
Use `pnpm typecheck`, `pnpm exec vitest run`, and `pnpm build` to check the UI. `pnpm check:pilots` validates the matching AI/MCP package and generated guidance after the UI build. Browser tests require a Playwright Chromium installation. See [CONTRIBUTING.md](https://github.com/playbookTV/Rayden/blob/main/CONTRIBUTING.md) for contributor setup.
|
|
94
169
|
|
|
95
170
|
## Contributors
|
|
96
171
|
|
|
@@ -105,4 +180,4 @@ function App() {
|
|
|
105
180
|
|
|
106
181
|
## License
|
|
107
182
|
|
|
108
|
-
MIT
|
|
183
|
+
MIT
|