@raydenui/ui 0.4.0 → 0.4.1

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)
@@ -163,7 +169,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 +183,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`:
+
+```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"]
+    }
+  }
+}
+```
 
-Add the rules to your AI assistant's context:
+### 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.
@@ -309,4 +351,4 @@ MIT License - see [LICENSE](./LICENSE) for details.
 
 ---
 
-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.4.1",
   "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"
   }
-}
+}