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