@raydenui/ui 0.4.1 → 0.5.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 +62 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,6 +83,67 @@ function App() {
|
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
## Tailwind Integration
|
|
87
|
+
|
|
88
|
+
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.
|
|
89
|
+
|
|
90
|
+
### Using Rayden Tokens in Your Code
|
|
91
|
+
|
|
92
|
+
Extend your Tailwind config with Rayden's color palette:
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
// tailwind.config.js (Tailwind v3)
|
|
96
|
+
import { colors } from "@raydenui/ui/preset";
|
|
97
|
+
|
|
98
|
+
export default {
|
|
99
|
+
theme: {
|
|
100
|
+
extend: {
|
|
101
|
+
colors,
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
content: [
|
|
105
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
106
|
+
// Include Rayden UI components so Tailwind scans them
|
|
107
|
+
"node_modules/@raydenui/ui/dist/**/*.js",
|
|
108
|
+
],
|
|
109
|
+
};
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
For Tailwind v4 with CSS-based config:
|
|
113
|
+
|
|
114
|
+
```css
|
|
115
|
+
/* app.css */
|
|
116
|
+
@import "tailwindcss";
|
|
117
|
+
@import "@raydenui/ui/styles.css";
|
|
118
|
+
|
|
119
|
+
@source "node_modules/@raydenui/ui/dist/**/*.js";
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Or extend the theme in CSS:
|
|
123
|
+
|
|
124
|
+
```css
|
|
125
|
+
@import "tailwindcss";
|
|
126
|
+
@import "@raydenui/ui/styles.css";
|
|
127
|
+
|
|
128
|
+
@theme {
|
|
129
|
+
--color-primary-400: #F56630;
|
|
130
|
+
--color-primary-500: #EB5017;
|
|
131
|
+
/* ... other tokens from @raydenui/ui/preset */
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Available Token Exports
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import {
|
|
139
|
+
colors, // Color palette (primary, grey, success, error, warning, info)
|
|
140
|
+
shadows, // Box shadows (soft, hard variants)
|
|
141
|
+
spacing, // Spacing scale (4px base)
|
|
142
|
+
typography, // Font sizes, line heights, letter spacing
|
|
143
|
+
grid, // Breakpoints and layout tokens
|
|
144
|
+
} from "@raydenui/ui/preset";
|
|
145
|
+
```
|
|
146
|
+
|
|
86
147
|
## Components
|
|
87
148
|
|
|
88
149
|
### Forms & Inputs
|
|
@@ -346,7 +407,7 @@ MIT License - see [LICENSE](./LICENSE) for details.
|
|
|
346
407
|
|
|
347
408
|
## Acknowledgments
|
|
348
409
|
|
|
349
|
-
- Design system based on [Rayna UI](https://
|
|
410
|
+
- Design system based on [Rayna UI](https://raynaui.com) by Rayna UI Team
|
|
350
411
|
- Built with [React](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/)
|
|
351
412
|
|
|
352
413
|
---
|