Rayden UI

A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the Rayna UI Figma design system to life with pixel-perfect React components.

Features

• 24+ Production-Ready Components — Buttons, Inputs, Tables, Selects, Sidebars, and more
• Pre-built Blocks — Login forms, notifications, tables, and more ready to drop in
• AI Compatibility — @raydenui/ai package for reliable LLM code generation
• Tailwind CSS v4 — Modern styling with custom design tokens
• Fully Typed — Complete TypeScript support with exported types
• Accessible — Built with ARIA attributes and keyboard navigation
• Tree-Shakeable — Import only what you need
• Dual Format — ESM and CommonJS builds included

Installation

# npm
npm install @raydenui/ui

# pnpm
pnpm add @raydenui/ui

# yarn
yarn add @raydenui/ui

Peer Dependencies

Rayden UI requires React 18 or higher:

npm install react react-dom

Quick Start

1. Import the Styles

Add the Rayden UI stylesheet to your app's entry point:

// App.tsx or main.tsx
import "@raydenui/ui/styles.css";

Or in CSS:

/* globals.css */
@import "@raydenui/ui/styles.css";

2. Use Components

import { Button, Input, Badge } from "@raydenui/ui";

function App() {
  return (
    <div className="flex flex-col gap-4 p-8">
      <Input
        label="Email"
        placeholder="you@example.com"
        helperText="We'll never share your email"
      />
      <Button variant="primary" size="lg">
        Subscribe
      </Button>
      <Badge color="success">Active</Badge>
    </div>
  );
}

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:

// 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:

/* app.css */
@import "tailwindcss";
@import "@raydenui/ui/styles.css";

@source "node_modules/@raydenui/ui/dist/**/*.js";

Or extend the theme in 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

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

Navigation

Data Display

Feedback

Layout

Blocks

Pre-built UI patterns combining multiple components for common use cases. View all blocks →

import { LoginBlock, NotificationsBlock } from "@raydenui/ui";

function App() {
  return (
    <LoginBlock
      variant="split"
      onSubmit={handleLogin}
      socialProviders={["google", "github"]}
    />
  );
}

AI Integration

The @raydenui/ai package enables LLMs to reliably generate Rayden UI code without hallucination.

# Run directly with npx (no install needed)
npx @raydenui/ai

# Or install globally
npm install -g @raydenui/ai

Features

• Component Manifests — Structured definitions of all components, props, and examples
• Design Tokens — Complete token system in JSON format
• Composition Rules — Guidelines for combining components correctly
• MCP Server — Model Context Protocol server for AI assistants

Claude Desktop Integration

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "rayden-ai": {
      "command": "npx",
      "args": ["@raydenui/ai"]
    }
  }
}

Claude Code Integration

Add to your project's .mcp.json:

{
  "mcpServers": {
    "rayden-ai": {
      "command": "npx",
      "args": ["@raydenui/ai"]
    }
  }
}

Programmatic Usage

import { getComponentManifest, getAllManifests } from "@raydenui/ai/manifests";
import { tokens } from "@raydenui/ai/tokens";

// Get all component definitions
const manifests = getAllManifests();

// Get a specific component
const buttonManifest = getComponentManifest("Button");

See the full AI Integration Guide for setup instructions.

Design Tokens

Rayden UI includes a complete design token system extracted from the Rayna UI Figma design system.

Using Tokens with Tailwind

All tokens are available as Tailwind CSS v4 theme variables:

// Use token colors directly in Tailwind classes
<div className="bg-primary-400 text-grey-900">
  Primary background with grey text
</div>

// Custom shadows
<div className="shadow-soft-lg">
  Soft shadow effect
</div>

Importing Tokens Programmatically

import { colors, shadows, spacing, typography } from "@raydenui/ui/preset";

// Access tokens in JavaScript
console.log(colors.primary[400]); // "#F56630"
console.log(shadows.soft.lg);     // "0px 4px 6px..."

Color Palette

Scale	Primary	Secondary	Grey	Success	Error	Warning
50	#FFECE5	#E3EFFC	#F9FAFB	#E7F6EC	#FBEAE9	#FEF6E7
400	#F56630	#1671D9	#98A2B3	#0F973D	#D42620	#F3A218
700	#AD3307	#04326B	#344054	#036B26	#9E0A05	#865503

See Design Tokens Documentation for the complete reference.

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

# Clone the repository
git clone https://github.com/your-org/rayden.git
cd rayden

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

Commands

pnpm build            # Build the library
pnpm dev              # Watch mode for development
pnpm typecheck        # Run TypeScript type checking
pnpm storybook        # Start Storybook on port 6006
pnpm build-storybook  # Build static Storybook

Testing

Tests run via Storybook's Vitest addon with Playwright browser testing:

pnpm exec vitest              # Run all tests
pnpm exec vitest Button       # Run tests matching "Button"
pnpm exec vitest --watch      # Watch mode

Project Structure

src/
├── components/           # React components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx
│   │   └── index.ts
│   └── ...
├── styles/
│   └── globals.css       # Tailwind v4 theme tokens
├── utils/
│   └── cn.ts             # Class merging utility
├── index.ts              # Component exports
└── preset.ts             # Design token exports

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork and clone the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Make your changes and add tests
4. Run pnpm typecheck and pnpm exec vitest
5. Commit your changes following Conventional Commits
6. Submit a pull request

License

MIT License - see LICENSE for details.

Acknowledgments

• Design system based on Rayna UI by Rayna UI Team
• Built with React, Tailwind CSS, and Storybook

Made with care for the React community. By Ovalay Studios (https://ovalay.studio)