Rayden UI

A modern, accessible React component library built with Tailwind CSS v4. Rayden UI brings the Rayna UI Figma design system to life with pixel-perfect React components.

Features

• 15+ Production-Ready Components — Buttons, Inputs, Tabs, Alerts, and more
• Tailwind CSS v4 — Modern styling with custom design tokens
• Fully Typed — Complete TypeScript support with exported types
• Accessible — Built with ARIA attributes and keyboard navigation
• Tree-Shakeable — Import only what you need
• Dual Format — ESM and CommonJS builds included

Installation

# npm
npm install @raydenui/ui

# pnpm
pnpm add @raydenui/ui

# yarn
yarn add @raydenui/ui

Peer Dependencies

Rayden UI requires React 18 or higher:

npm install react react-dom

Quick Start

1. Import the Styles

Add the Rayden UI stylesheet to your app's entry point:

// App.tsx or main.tsx
import "@raydenui/ui/styles.css";

Or in CSS:

/* globals.css */
@import "@raydenui/ui/styles.css";

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

Components

Forms & Inputs

Navigation

Feedback

Layout

Design Tokens

Rayden UI includes a complete design token system extracted from the Rayna UI Figma design system.

Using Tokens with Tailwind

All tokens are available as Tailwind CSS v4 theme variables:

// Use token colors directly in Tailwind classes
<div className="bg-primary-400 text-grey-900">
  Primary background with grey text
</div>

// Custom shadows
<div className="shadow-soft-lg">
  Soft shadow effect
</div>

Importing Tokens Programmatically

import { colors, shadows, spacing, typography } from "@raydenui/ui/preset";

// Access tokens in JavaScript
console.log(colors.primary[400]); // "#F56630"
console.log(shadows.soft.lg);     // "0px 4px 6px..."

Color Palette

Scale	Primary	Secondary	Grey	Success	Error	Warning
50	#FFECE5	#E3EFFC	#F9FAFB	#E7F6EC	#FBEAE9	#FEF6E7
400	#F56630	#1671D9	#98A2B3	#0F973D	#D42620	#F3A218
700	#AD3307	#04326B	#344054	#036B26	#9E0A05	#865503

See Design Tokens Documentation for the complete reference.

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

# Clone the repository
git clone https://github.com/your-org/rayden.git
cd rayden

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

Commands

pnpm build            # Build the library
pnpm dev              # Watch mode for development
pnpm typecheck        # Run TypeScript type checking
pnpm storybook        # Start Storybook on port 6006
pnpm build-storybook  # Build static Storybook

Testing

Tests run via Storybook's Vitest addon with Playwright browser testing:

pnpm exec vitest              # Run all tests
pnpm exec vitest Button       # Run tests matching "Button"
pnpm exec vitest --watch      # Watch mode

Project Structure

src/
├── components/           # React components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx
│   │   └── index.ts
│   └── ...
├── styles/
│   └── globals.css       # Tailwind v4 theme tokens
├── utils/
│   └── cn.ts             # Class merging utility
├── index.ts              # Component exports
└── preset.ts             # Design token exports

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

1. Fork and clone the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Make your changes and add tests
4. Run pnpm typecheck and pnpm exec vitest
5. Commit your changes following Conventional Commits
6. Submit a pull request

License

MIT License - see LICENSE for details.

Acknowledgments

• Design system based on Rayna UI by Rayna UI Team
• Built with React, Tailwind CSS, and Storybook

Made with care for the React community.