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="you@example.com" />
      <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

Leslie Isah

Bolude Daniel

License

MIT