@raydenui/ui 0.4.1 → 0.6.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 +66 -1
- package/dist/index.cjs +4837 -2454
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +180 -2
- package/dist/index.d.ts +180 -2
- package/dist/index.js +4831 -2456
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +28 -3
package/README.md
CHANGED
|
@@ -9,7 +9,11 @@
|
|
|
9
9
|
A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the [Rayna UI](https://www.raynaui.com/) Figma design system to life with pixel-perfect React components.
|
|
10
10
|
|
|
11
11
|
[](https://www.npmjs.com/package/@raydenui/ui)
|
|
12
|
+
[](https://www.npmjs.com/package/@raydenui/ui)
|
|
12
13
|
[](https://opensource.org/licenses/MIT)
|
|
14
|
+
[](https://rayden-docs.vercel.app)
|
|
15
|
+
[](https://main--683f465dfa671db004742598.chromatic.com)
|
|
16
|
+
[](https://github.com/playbookTV/Rayden/pulls)
|
|
13
17
|
|
|
14
18
|
## Features
|
|
15
19
|
|
|
@@ -83,6 +87,67 @@ function App() {
|
|
|
83
87
|
}
|
|
84
88
|
```
|
|
85
89
|
|
|
90
|
+
## Tailwind Integration
|
|
91
|
+
|
|
92
|
+
Rayden UI ships pre-compiled CSS, so components work out of the box. However, if you want to use Rayden's design tokens in your own Tailwind classes (e.g., `bg-primary-400`, `text-grey-700`), you need additional configuration.
|
|
93
|
+
|
|
94
|
+
### Using Rayden Tokens in Your Code
|
|
95
|
+
|
|
96
|
+
Extend your Tailwind config with Rayden's color palette:
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
// tailwind.config.js (Tailwind v3)
|
|
100
|
+
import { colors } from "@raydenui/ui/preset";
|
|
101
|
+
|
|
102
|
+
export default {
|
|
103
|
+
theme: {
|
|
104
|
+
extend: {
|
|
105
|
+
colors,
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
content: [
|
|
109
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
110
|
+
// Include Rayden UI components so Tailwind scans them
|
|
111
|
+
"node_modules/@raydenui/ui/dist/**/*.js",
|
|
112
|
+
],
|
|
113
|
+
};
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
For Tailwind v4 with CSS-based config:
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
/* app.css */
|
|
120
|
+
@import "tailwindcss";
|
|
121
|
+
@import "@raydenui/ui/styles.css";
|
|
122
|
+
|
|
123
|
+
@source "node_modules/@raydenui/ui/dist/**/*.js";
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Or extend the theme in CSS:
|
|
127
|
+
|
|
128
|
+
```css
|
|
129
|
+
@import "tailwindcss";
|
|
130
|
+
@import "@raydenui/ui/styles.css";
|
|
131
|
+
|
|
132
|
+
@theme {
|
|
133
|
+
--color-primary-400: #F56630;
|
|
134
|
+
--color-primary-500: #EB5017;
|
|
135
|
+
/* ... other tokens from @raydenui/ui/preset */
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Available Token Exports
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
import {
|
|
143
|
+
colors, // Color palette (primary, grey, success, error, warning, info)
|
|
144
|
+
shadows, // Box shadows (soft, hard variants)
|
|
145
|
+
spacing, // Spacing scale (4px base)
|
|
146
|
+
typography, // Font sizes, line heights, letter spacing
|
|
147
|
+
grid, // Breakpoints and layout tokens
|
|
148
|
+
} from "@raydenui/ui/preset";
|
|
149
|
+
```
|
|
150
|
+
|
|
86
151
|
## Components
|
|
87
152
|
|
|
88
153
|
### Forms & Inputs
|
|
@@ -346,7 +411,7 @@ MIT License - see [LICENSE](./LICENSE) for details.
|
|
|
346
411
|
|
|
347
412
|
## Acknowledgments
|
|
348
413
|
|
|
349
|
-
- Design system based on [Rayna UI](https://
|
|
414
|
+
- Design system based on [Rayna UI](https://raynaui.com) by Rayna UI Team
|
|
350
415
|
- Built with [React](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/)
|
|
351
416
|
|
|
352
417
|
---
|