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

• 33+ 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

Quick Start

The fastest way to get started is with create-rayden-app:

npx create-rayden-app my-app

Choose from 6 templates (blank, minimal, landing, dashboard, ecommerce, blog) with Vite or Next.js. See the create-rayden-app guide for all options.

Manual Installation

npm install @raydenui/ui

Import the styles in your app’s entry point:

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

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>
  );
}

Components

Forms & Inputs

Navigation

Data Display

Feedback

Layout

Resources

• Getting Started — Installation and setup guide
• Components — Full component documentation
• Design Tokens — Color, typography, and spacing tokens
• Blocks — Pre-built UI patterns
• AI Integration — @raydenui/ai package guide