OPEN SOURCEReact, TypeScript & Tailwind CSS

React components.
Made to feel right.

Rayden UI is a free, open-source React component library.
TypeScript, Tailwind CSS, and starters for Next.js and Vite.

Explore the components Start building
+

Explore React UI components

Interactive previews
Project activity
1,28418.6%

Component interactions

MonTueWedThuFriSatSun
EngagementDemo data
ROOM FOR YOUR IDEAS

Less friction.
More feeling.

Good interfaces make room for both.
Project AuroraBringing it all together
The little things add up.
In progressReady to ship⌘ K
Hover. Press. Make it yours.
September 2026
22
Make time for the good stuff.Tuesday, September 22
Your look. Your rules.
16
Motion
Small changes. Whole new feel.
Browse the React component library

Fits right into your workflow.

⚛ReactTSTypeScript≈Tailwind CSSNNext.jsVite
MIT licensedCustomize every detailBuilt for React

A CUSTOMIZABLE REACT DESIGN SYSTEM

Looks considered.
Feels like yours.

Build forms, dashboards, and product interfaces with typed components, reusable page blocks, and shared design tokens. Use the defaults or make them your own.

--color-primary
One token. A whole system.

Design tokens that work together.

Customize colors, typography, spacing, and light or dark themes through shared CSS variables and Tailwind CSS v4 design tokens.

Explore Rayden design tokens
your-next-idea.tsx 
import { Button } from '@raydenui/ui';

// The beginning of something good.
<Button variant="primary">
  Make it happen
</Button>

Typed React components. Less setup.

Import React components with TypeScript definitions and compiled CSS. Add Rayden to an existing React 18+ app or start fresh with Next.js or Vite.

Install Rayden UI
JL
Jules updated ButtonAdded the finishing touches
2m
AM
Alex left a note“That’s the one.”
5m

From form inputs to data tables.

Combine buttons, inputs, date pickers, tables, and activity feeds. Import page blocks separately from @raydenui/ui/blocks for larger layouts.

Explore activity feed

REACT STARTERS FOR NEXT.JS & VITE

Skip the blank canvas.

Create a React app with TypeScript and Rayden preconfigured. Choose a dashboard, landing page, e-commerce, or blog starter for Next.js or Vite.

Your framework
your-next-idea / dashboard
Layout conceptExplore React starter templates
CREATE YOUR PROJECT
$npx create-rayden-app my-app -f vite -t dashboard --ts

RAYDEN MCP FOR AI CODING ASSISTANTS

Built for you.
Ready for your AI.

The @raydenui/ai companion uses the Model Context Protocol (MCP) to give coding assistants Rayden component APIs, design tokens, and layout recipes. Use the integration guide to connect a compatible client.

Set up the Rayden MCP server
One shared language.MCP
Y

Build a settings page that feels like the rest of my app.

Rayden contextAvailable to your agent
Component manifestsProps & variants
Design tokensYour visual system
Composition recipesPatterns that fit
@raydenui/aiLess guesswork. More context.

BEFORE YOU DIVE IN

Rayden UI.
Your questions, answered.

Ask us on GitHub
What is Rayden UI?

Rayden UI is a free, open-source React component library and design system. It includes TypeScript components, page blocks, icons, shared design tokens, light and dark themes, and project starters for Next.js and Vite.

Is Rayden UI free for commercial projects?

Yes. Rayden UI is released under the MIT license and can be used in personal and commercial projects. Keep the copyright and license notice when distributing the software.

Read the MIT license ↗
How do I install Rayden UI in a React app?

Run npm install @raydenui/ui in a React 18+ project, then import @raydenui/ui/styles.css once in your app entry point or root layout. Import components such as Button and Input from @raydenui/ui. Follow the installation guide for a complete example.

Read the installation guide ↗
Does Rayden UI work with Next.js and Vite?

Yes. Use Rayden UI in an existing Next.js or Vite React app, or run npx create-rayden-app@latest my-app to choose a framework and starter. In Next.js App Router, put interactive components and providers in a client component and import global styles in the root layout.

Choose a React starter ↗
Do I need to install Tailwind CSS to use Rayden UI?

No. Rayden UI is built with Tailwind CSS v4, but the package includes compiled component styles. Import @raydenui/ui/styles.css to use them. Configure Tailwind CSS v4 in your own app when you want to generate utility classes for layouts and customization.

Configure Tailwind CSS ↗
Can I customize the components and themes?

Yes. Rayden exposes shared design tokens, CSS variables, TypeScript props, and component variants. Customize colors, spacing, typography, and light or dark themes to match your product. Page blocks are available through the separate @raydenui/ui/blocks import.

Explore design tokens ↗
What does the Rayden AI companion do?

The @raydenui/ai package provides an MCP server with Rayden component information, design tokens, and composition recipes for compatible coding assistants. The documentation also publishes a component catalog and agent guidance. Check the integration guide for current setup instructions and features marked as local development pilots.

Read the AI integration guide ↗

BUILD WITH RAYDEN

Your first Next.js form, from start to finish.

Read the Next.js guide

Give your coding assistant the Rayden playbook.

Read the Rayden AI guide

THE NEXT GOOD IDEA IS YOURS.

Give it a great interface.

Start building with Rayden Explore the source

Find your building block

Esc to close · Enter to open a selected link

Start with one component.

import { Button } from '@raydenui/ui';
import '@raydenui/ui/styles.css';

export default function App() {
  return (
    <Button variant="primary">
      Make it happen
    </Button>
  );
}
Read the docs ↗