Rayden UI

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

Installation

npm install @raydenui/ui

Quick Start

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
• @raydenui/ai — MCP server for AI-assisted development

License

MIT