Radian UI

A modern, accessible, and customizable React component library and design system built with Radix UI and Tailwind CSS.

Build beautiful products faster with production-ready components, UI blocks, a complete Figma design system, and free design resources.

Free · Open Source · Accessible · Customizable · Developer-first

Website · Documentation · Figma Kit · Resources

---

✨ Features

• 🧩 Production-ready components — Beautiful React components ready to use in real applications
• 🎨 Tailwind CSS powered — Utility-first, customizable, and easy to theme
• ♿ Accessibility-first — Built with accessible primitives including Radix UI
• 🧱 Variants with CVA — Flexible and scalable component variants
• ⚡ Radian CLI — Quickly initialize Radian UI and add individual components
• ▲ Next.js & Vite ready — Designed for modern React applications
• 🌗 Light & dark themes — Built around customizable design tokens
• 🎨 Figma design system — Design and development resources that work together
• 🧰 Free resources — Avatars and a growing collection of useful design assets
• 🧱 UI blocks — Ready-made interface patterns for building products faster

---

🚀 Quick Start

Initialize Radian UI in your project:

npx radianui@latest init

Using pnpm:

pnpm dlx radianui@latest init

Then add the components you need:

npx radianui@latest add button

Or:

pnpm dlx radianui@latest add button

The component source is added directly to your project, giving you full control over customization and implementation.

Read the installation documentation →

---

📚 Documentation

Explore the complete Radian UI documentation for installation guides, components, design foundations, theming, CLI usage, examples, and more.

Documentation

https://radianui.com/documentation

Explore:

• Getting started
• Installation
• Components
• Component examples
• Colors
• Typography
• Icons
• Themes
• CLI
• Next.js setup
• Vite setup
• Figma
• Resources
• Changelog

---

🎨 Figma Design System

Radian UI isn't just a React component library. It also includes a free Figma design system and UI kit designed to keep designers and developers working from the same foundations.

Get the Figma Kit

Radian UI Figma Kit →

The Figma design system includes:

• 🎨 Colors and design foundations
• 🔤 Typography
• 📐 Spacing
• 🧩 Core UI components
• 🔀 Component variants
• 📏 Auto Layout
• 🎛️ Figma variables
• 🌗 Multiple theme modes
• 🧱 Ready-to-use UI blocks

Customize your brand colors and typography, publish the library, and start designing with a consistent system across your entire product.

---

⚡ Radian CLI

Radian UI includes a CLI that makes it easy to initialize your project and add components.

Initialize

npx radianui@latest init

Add a component

npx radianui@latest add button

Using pnpm

pnpm dlx radianui@latest init
pnpm dlx radianui@latest add button

Using Yarn

yarn dlx radianui@latest init

Using Bun

bunx radianui@latest init

Instead of hiding your UI behind a dependency, Radian UI gives you the component source so you can modify, extend, and own your implementation.

---

🧰 Free Design Resources

Radian UI includes a growing Resources library for designers and developers.

Explore Resources

https://radianui.com/docs/getting-started/resources

The goal is simple: provide commonly needed product-design assets in one place so you don't have to search for them every time you start a new project.

👤 Free UI Avatars

Radian UI currently provides 216 diverse, royalty-free UI avatars.

Browse all 216 avatars →

The avatars can be used in:

• Dashboards
• SaaS products
• User profiles
• Account menus
• Messaging applications
• CRM interfaces
• Tables
• Teams
• Testimonials
• Community interfaces

Available workflows include:

• SVG
• PNG
• HTML
• Next.js
• Figma

More resources are coming

The Radian UI resource library is growing and is designed to include assets such as:

• 🏢 Popular brand logos
• 🌍 Country flags
• 💳 Credit card icons
• 😀 Emojis
• 👤 UI avatars
• And more

Some resource collections are still being developed. Check the Resources page for the latest available assets.

---

🧱 UI Blocks

Don't want to build every screen from individual components?

Radian UI also provides reusable UI blocks for common application experiences.

Explore patterns for:

• Sign in
• Sign up
• Account verification
• Password reset
• New password
• Account onboarding
• Sidebars
• Application layouts
• Settings
• Dashboards
• And more

Explore Radian UI Blocks →

---

🛠️ Built With

Radian UI is built using modern, battle-tested tools:

• React
• Tailwind CSS
• Radix UI
• Class Variance Authority
• Lucide

The goal is to provide excellent defaults while keeping the final implementation completely under your control.

---

🤝 Contributing

We welcome contributions to Radian UI.

Whether you're improving an existing component, fixing a bug, updating documentation, or proposing something completely new, contributions are appreciated.

Please read the Contributing Guide before getting started.

Get involved

• 💬 GitHub Discussions
• 🐛 Report a Bug
• 🧪 Request a Feature
• 🛠️ Open Issues
• ⭐ Star Radian UI on GitHub

---

⚖️ License

Radian UI is licensed under the MIT License.

You are free to use, modify, and distribute Radian UI in personal and commercial projects in accordance with the license.

---

Build faster with Radian UI

Beautiful React components, a complete Figma design system, UI blocks, and free design resources.

Website · Docs · Figma · Resources · GitHub

Free. Open Source. Developer-first.

Made with ❤️ by the Radian UI team