@raydenui/ui 0.4.0 → 0.5.0

package/README.md

@@ -1,6 +1,12 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./public/MacBook Air - 17.png">
+  <source media="(prefers-color-scheme: light)" srcset="./public/MacBook Air - 17.png">
+  <img alt="Rayden UI - Build UI faster. A React UI system designed for humans and AI." src="./public/MacBook Air - 17.png" width="100%">
+</picture>
+
 # Rayden UI
 
-A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the [Rayna UI](https://www.figma.com/community/file/1229854793310881425) Figma design system to life with pixel-perfect React components.
+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.
 
 [![npm version](https://img.shields.io/npm/v/@raydenui/ui.svg)](https://www.npmjs.com/package/@raydenui/ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -77,6 +83,67 @@ function App() {
 }
 ```
 
+## Tailwind Integration
+
+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.
+
+### Using Rayden Tokens in Your Code
+
+Extend your Tailwind config with Rayden's color palette:
+
+```js
+// tailwind.config.js (Tailwind v3)
+import { colors } from "@raydenui/ui/preset";
+
+export default {
+  theme: {
+    extend: {
+      colors,
+    },
+  },
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // Include Rayden UI components so Tailwind scans them
+    "node_modules/@raydenui/ui/dist/**/*.js",
+  ],
+};
+```
+
+For Tailwind v4 with CSS-based config:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@raydenui/ui/styles.css";
+
+@source "node_modules/@raydenui/ui/dist/**/*.js";
+```
+
+Or extend the theme in CSS:
+
+```css
+@import "tailwindcss";
+@import "@raydenui/ui/styles.css";
+
+@theme {
+  --color-primary-400: #F56630;
+  --color-primary-500: #EB5017;
+  /* ... other tokens from @raydenui/ui/preset */
+}
+```
+
+### Available Token Exports
+
+```tsx
+import {
+  colors,      // Color palette (primary, grey, success, error, warning, info)
+  shadows,     // Box shadows (soft, hard variants)
+  spacing,     // Spacing scale (4px base)
+  typography,  // Font sizes, line heights, letter spacing
+  grid,        // Breakpoints and layout tokens
+} from "@raydenui/ui/preset";
+```
+
 ## Components
 
 ### Forms & Inputs
@@ -163,7 +230,11 @@ function App() {
 The `@raydenui/ai` package enables LLMs to reliably generate Rayden UI code without hallucination.
 
 ```bash
-pnpm add @raydenui/ai
+# Run directly with npx (no install needed)
+npx @raydenui/ai
+
+# Or install globally
+npm install -g @raydenui/ai
 ```
 
 ### Features
@@ -173,15 +244,47 @@ pnpm add @raydenui/ai
 - **Composition Rules** — Guidelines for combining components correctly
 - **MCP Server** — Model Context Protocol server for AI assistants
 
-### Usage with AI Assistants
+### Claude Desktop Integration
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
 
-Add the rules to your AI assistant's context:
+```json
+{
+  "mcpServers": {
+    "rayden-ai": {
+      "command": "npx",
+      "args": ["@raydenui/ai"]
+    }
+  }
+}
+```
+
+### Claude Code Integration
+
+Add to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "rayden-ai": {
+      "command": "npx",
+      "args": ["@raydenui/ai"]
+    }
+  }
+}
+```
+
+### Programmatic Usage
 
 ```tsx
-import { RAYDEN_RULES } from "@raydenui/ai/rules";
+import { getComponentManifest, getAllManifests } from "@raydenui/ai/manifests";
+import { tokens } from "@raydenui/ai/tokens";
+
+// Get all component definitions
+const manifests = getAllManifests();
 
-// Or use the MCP server for Claude, Cursor, etc.
-// npx rayden-ai-mcp
+// Get a specific component
+const buttonManifest = getComponentManifest("Button");
 ```
 
 See the full [AI Integration Guide](./docs/rayden-ai.md) for setup instructions.
@@ -304,9 +407,9 @@ MIT License - see [LICENSE](./LICENSE) for details.
 
 ## Acknowledgments
 
-- Design system based on [Rayna UI](https://www.figma.com/community/file/1229854793310881425) by Rayna UI Team
+- Design system based on [Rayna UI](https://raynaui.com) by Rayna UI Team
 - Built with [React](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/), and [Storybook](https://storybook.js.org/)
 
 ---
 
-Made with care for the React community.
+Made with care for the React community. By Ovalay Studios (https://ovalay.studio)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raydenui/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A modern React UI component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,6 +26,14 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup && npx @tailwindcss/cli -i src/styles/globals.css -o dist/styles.css --minify",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_22e6810e48a2640"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -42,6 +50,8 @@
     "*.css"
   ],
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.19",
     "@storybook/addon-docs": "^10.2.19",
     "@storybook/addon-vitest": "^10.2.19",
     "@storybook/react": "^10.2.19",
@@ -54,6 +64,7 @@
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
     "autoprefixer": "^10.4.27",
+    "chromatic": "^15.2.0",
     "clsx": "^2.1.1",
     "playwright": "^1.58.2",
     "postcss": "^8.5.8",
@@ -66,12 +77,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.1.0"
-  },
-  "scripts": {
-    "build": "tsup && npx @tailwindcss/cli -i src/styles/globals.css -o dist/styles.css --minify",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
   }
-}
+}