Rayden UI

Build clear, consistent product experiences with React components that work together. Start with a form, a dashboard, or a complete page — and make it your own.

Explore components · Start building

Try the checklist or edit the project name. This small workspace combines Rayden’s buttons, inputs, checkboxes, and modal.

Choose your starting point

• Build a screen: Browse components by task, from forms to navigation and feedback.
• Skip the blank page: Use a ready-made block for common product flows.
• Make it yours: Explore design tokens for color, type, and spacing.

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

Built for your workflow

Rayden brings the Rayna UI  design system to React with 33+ components, TypeScript types, and Tailwind CSS v4. Import only the components you need, or use AI integration to help assemble them.

Resources

• Component reference — Find components grouped by what you want to build.
• Getting started — Installation and setup.
• Design tokens — Color, typography, and spacing.
• AI integration — Tools for AI-assisted development.