Rayden UI

A modern, accessible React component library built with Tailwind CSS v4. Pixel-perfect components from the Rayna UI design system.

Quick Start

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

npx create-rayden-app my-app
cd my-app
npm install
npm run dev

Templates

| Template | Description | |----------|-------------| | blank | Empty project, Rayden UI configured | | minimal | Demo of core components | | landing | Hero, features, pricing, CTA | | dashboard | Sidebar, tables, metrics | | ecommerce | Products, cart, checkout | | blog | Articles, categories, posts |

CLI Options

npx create-rayden-app my-app -f vite -t landing --ts --pm pnpm

| Flag | Options | |------|---------| | -f, --framework | vite (recommended), nextjs | | -t, --template | blank, minimal, landing, dashboard, ecommerce, blog | | --ts / --js | TypeScript (default) or JavaScript | | --pm | npm, pnpm, yarn |

Manual Installation

npm install @raydenui/ui

Usage

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

function App() {
  return (
    <div className="flex flex-col gap-4 p-8">
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary" size="lg">Subscribe</Button>
      <Badge color="success">Active</Badge>
    </div>
  );
}

Components (33+)

Forms & Inputs: Button, ButtonGroup, Input, Select, FormControl, Chip, FileUpload, Counter, Slider, DatePicker

Navigation: Tabs, Breadcrumb, Pagination, SidebarMenu, DropdownMenu, Stepper

Data Display: Table, Avatar, ActivityFeed, MetricsCard, Icon, EmptyStateIllustration, Chart

Feedback: Alert, Badge, Banner, ProgressBar, ProgressCircle, Spinner, Tooltip

Layout: Accordion, Divider, Modal

Resources

• Documentation — Full component API and guides
• Storybook — Interactive component explorer
• create-rayden-app — CLI scaffolding with 6 templates
• @raydenui/ai — MCP server for AI-assisted development

Contributors

License

MIT