AfnoUI is an open-source, registry-driven React + TypeScript component library and CLI. It provides accessible Radix UI + Tailwind CSS v4 components plus visual builders for forms, tables, kanban boards, trees, and database schemas, a 17-type chart library, a dependency-free drag-and-drop engine, and a live theme lab.

How do I install AfnoUI?

Run `npx afnoui init` to set up Tailwind, CSS variables, and the base design system, then `npx afnoui add button card dialog` to add components. It works with npm, pnpm, yarn, and bun (npx / pnpm dlx / yarn dlx / bunx).

What CLI commands does AfnoUI have?

Setup: `afnoui init` (design system; add --dnd for the drag-and-drop engine). Install: `afnoui add ` and `afnoui add / ` for variants. Engine systems: `afnoui form init`, `table init`, `kanban init`, `tree init`, `dnd init`, and `chart init` each install the complete shared system for that category. Discover: `afnoui list` and `afnoui list variants`. Maintain: `afnoui update`, `afnoui doctor`, `afnoui diagnose`, and `afnoui clean`. Run `afnoui help` for the full reference. Every command accepts --dry-run, --force, and --debug.

Is AfnoUI free and open source?

Yes. AfnoUI is free and open source. The CLI writes component source directly into your project, so you own and can edit the code — it is not a runtime dependency.

Will the AfnoUI CLI overwrite my changes?

No. AfnoUI records a hash of every file it writes in afnoui.json. If you have edited one of those files since it was installed, a re-install stops and asks before touching it, and only --force overwrites. Files AfnoUI never wrote are left alone entirely, and --dry-run previews every write and install without touching disk.

How is AfnoUI different from shadcn/ui?

Like shadcn/ui, AfnoUI copies source into your repo instead of shipping a black-box package. It goes further with visual builders (form, table, kanban, tree, schema), a 17-type chart library, a drag-and-drop engine with no third-party dependency, and a live theme lab, all driven by a hosted registry the CLI fetches from at install time.

Which frameworks and tools does AfnoUI use?

AfnoUI targets Next.js 15 and React 19 with TypeScript, Tailwind CSS v4, and Radix UI. Forms use Zod with React Hook Form, TanStack Form, or Action Form.

Can I build forms without writing code?

Yes. The Visual Form Builder lets you drag and drop 25+ field types, add conditional logic and dependent dropdowns, and export production-ready React + TypeScript with runtime or compile-time Zod validation.

Can I save a build and come back to it later?

Yes. Every builder has a JSON button that exports the complete build as a single JSON document — configuration, data, and any custom cell or card renderers. Paste that JSON back into the Import tab and you get the exact same build, including the template variant it started from. Nothing is stored on a server, so the JSON is yours to keep in a repo, a ticket, or a gist.

Does AfnoUI check my build for mistakes before I export?

Yes. Each builder runs a Build health check over your configuration and lists real problems with the exact fix: duplicate field names or column ids, conditional fields watching a field that no longer exists, columns whose data key is missing from the rows, kanban cards pointing at a deleted column, columns over their WIP limit, and flow nodes with a route action but no href. These are the mistakes that would otherwise surface as broken generated code in your project.

All Components

Edit CSS variables and see changes in real-time

npx afnoui add accordion/accordion-single

Writes to 2 places

Accordion Component

npx afnoui add accordion/accordion-multiple

Writes to 2 places

Multiple Selection

npx afnoui add alert/alert-default

Writes to 2 places

Default Alert

Heads up!

You can add components to your app using the cli.

npx afnoui add alert/alert-destructive

Writes to 2 places

Destructive Alert

Error

Your session has expired. Please log in again.

npx afnoui add alert-dialog/alert-dialog-basic

Writes to 2 places

Basic Alert Dialog

npx afnoui add alert-dialog/alert-dialog-destructive

Writes to 2 places

Destructive Action

npx afnoui add alert-dialog/alert-dialog-logout

Writes to 2 places

Logout Confirmation

npx afnoui add alert-dialog/alert-dialog-security

Writes to 2 places

Security Verification

npx afnoui add alert-dialog/alert-dialog-payment

Writes to 2 places

Payment Confirmation

npx afnoui add async-field/async-field-select

Writes to 2 places

Async Field Select

Async Select

npx afnoui add async-field/async-field-combobox

Writes to 2 places

Async Field Combobox

Async Combobox

npx afnoui add async-field/async-field-multi-select

Writes to 2 places

Async Field Multi Select

Async Multi Select

npx afnoui add async-field/async-field-multi-combobox

Writes to 2 places

Async Field Multi Combobox

Async Multi Combobox

npx afnoui add infinite-field/infinite-field-select

Writes to 2 places

Infinite Field Select

Infinite select — Products

npx afnoui add infinite-field/infinite-field-combobox

Writes to 2 places

Infinite Field Combobox

Infinite combobox — Products

npx afnoui add infinite-field/infinite-field-multi-select

Writes to 2 places

Infinite Field Multi Select

Infinite multi-select — Products

npx afnoui add infinite-field/infinite-field-multi-combobox

Writes to 2 places

Infinite Field Multi Combobox

Infinite multi-combobox — Products

npx afnoui add infinite-field/infinite-field-select-auto

Writes to 2 places

Infinite Field Select (auto-scroll)

Infinite select — Products

npx afnoui add infinite-field/infinite-field-combobox-auto

Writes to 2 places

Infinite Field Combobox (auto-scroll)

Infinite combobox — Products

npx afnoui add infinite-field/infinite-field-multi-select-auto

Writes to 2 places

Infinite Field Multi Select (auto-scroll)

Infinite multi-select — Products

npx afnoui add infinite-field/infinite-field-multi-combobox-auto

Writes to 2 places

Infinite Field Multi Combobox (auto-scroll)

Infinite multi-combobox — Products

npx afnoui add badge/badge-default

Writes to 2 places

Default Badge

Default

npx afnoui add badge/badge-secondary

Writes to 2 places

Secondary Badge

Secondary

npx afnoui add badge/badge-outline

Writes to 2 places

Outline Badge

Outline

npx afnoui add badge/badge-destructive

Writes to 2 places

Destructive Badge

Destructive

npx afnoui add breadcrumb/breadcrumb-basic

Writes to 2 places

Basic Breadcrumb

npx afnoui add breadcrumb/breadcrumb-with-icons

Writes to 2 places

With Icons

npx afnoui add breadcrumb/breadcrumb-with-ellipsis

Writes to 2 places

With Ellipsis Dropdown

npx afnoui add breadcrumb/breadcrumb-custom-separator

Writes to 2 places

Custom Separator

npx afnoui add breadcrumb/breadcrumb-file-path

Writes to 2 places

File Path Style

npx afnoui add button/button-variants

Writes to 2 places

Variants

npx afnoui add button/button-sizes

Writes to 2 places

Sizes

npx afnoui add button/button-with-icons

Writes to 2 places

With Icons

npx afnoui add button/button-states

Writes to 2 places

States

npx afnoui add card/card-basic

Writes to 2 places

Basic Card

Create Project

Deploy your new project in one-click.

Name

Framework

Notifications

Manage your notification settings.

Push Notifications

Receive push notifications

Email Notifications

Receive email updates

npx afnoui add card/card-stats

Writes to 2 places

Stats Cards

Total Revenue

$45,231.89

+20.1%from last month

Subscriptions

+2,350

+180.1%from last month

Sales

+12,234

-4.5%from last month

Active Now

+573

+201from last month

npx afnoui add card/card-pricing

Writes to 2 places

Pricing Cards

Starter

Perfect for individuals

$0/mo

5 projects
Basic analytics
Community support

Pro

Best for growing teams

$29/mo

Unlimited projects
Advanced analytics
Priority support
Custom integrations

Enterprise

For large organizations

$99/mo

Everything in Pro
Dedicated support
SLA guarantee
Custom contracts

npx afnoui add card/card-profile

Writes to 2 places

Profile Card

John Doe

Senior Developer

124

Posts

8.2k

Followers

256

Following

Sarah Miller

San Francisco, CA

Product Designer with 8+ years of experience. Passionate about creating beautiful and functional interfaces.

UI/UX

Design Systems

Figma

4.9 rating Joined 2019

npx afnoui add card/card-social-post

Writes to 2 places

Social Post Card

Alex Brown

Pro

@alexbrown • 2h ago

Just shipped a new feature! 🚀 Really excited about this one - it's going to make everyone's workflow so much smoother. Check it out and let me know what you think!

New Feature Announcement

blog.example.com

npx afnoui add card/card-notification

Writes to 2 places

Notification Card

Notifications

John Doe liked your post

2m ago

Sarah Miller commented on your photo

1h ago

Alex Brown started following you

3h ago

Tom Chen mentioned you in a comment

5h ago

npx afnoui add card/card-progress

Writes to 2 places

Progress Card

Project Progress

In Progress

Website Redesign

Overall Progress75%

DesignComplete

DevelopmentIn Progress

TestingPending

Due Dec 15

JDSMAB

npx afnoui add card/card-event

Writes to 2 places

Event Card

DEC

Team Standup

10:00 AM - 10:30 AM

Weekly sync to discuss project updates, blockers, and priorities for the week ahead.

Conference Room A / Zoom

Attendees:

JDSMABTC

npx afnoui add carousel/carousel-premium-fade

Writes to 2 places

Premium Fade

Slide 1

Slide 2

Slide 3

Engine BehaviorOpacity TransitionLoopingYes

npx afnoui add carousel/carousel-product-row

Writes to 2 places

Product Row

Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

Engine BehaviorBasis-1/3 Align StartLoopingNo

npx afnoui add carousel/carousel-infinite-slider

Writes to 2 places

Infinite Slider

FirstStandard sliding effect

SecondStandard sliding effect

ThirdStandard sliding effect

Engine BehaviorDefault Slide LogicLoopingYes

npx afnoui add carousel/carousel-scale-focus

Writes to 2 places

Scale Focus

Engine BehaviorConditional Opacity/ScaleLoopingYes

npx afnoui add carousel/carousel-progress-bar

Writes to 2 places

Progress Bar

Slide 1

Slide 2

Slide 3

Slide 4

Engine BehaviorState Driven WidthLoopingYes

npx afnoui add carousel/carousel-momentum-gallery

Writes to 2 places

Momentum Gallery

ASSET_ID: 000

Dynamic Width 40%

ASSET_ID: 001

Dynamic Width 60%

ASSET_ID: 002

Dynamic Width 30%

ASSET_ID: 003

Dynamic Width 70%

Engine BehaviordragFree: trueLoopingYes

npx afnoui add carousel/carousel-horizontal-feed

Writes to 2 places

Horizontal Feed

System Alert: Success Level

System Alert: Warning Level

System Alert: Error Level

System Alert: Info Level

Engine BehaviorAutoplayLoopingYes

npx afnoui add collapsible/collapsible-basic

Writes to 2 places

Basic Collapsible

npx afnoui add collapsible/collapsible-file-tree

Writes to 2 places

File Tree Explorer

App.tsx

main.tsx

npx afnoui add collapsible/collapsible-settings

Writes to 2 places

Settings Sections

LanguageEnglish

TimezoneUTC-5

Date FormatMM/DD/YYYY

npx afnoui add collapsible/collapsible-faq

Writes to 2 places

FAQ Style

npx afnoui add collapsible/collapsible-animated

Writes to 2 places

Animated Content

Logged in2 minutes ago

Updated profile1 hour ago

Created new project3 hours ago

Invited team member1 day ago

npx afnoui add combobox/combobox-basic

Writes to 2 places

Basic Combobox

Select framework...

npx afnoui add combobox/combobox-country

Writes to 2 places

Country Selector

Select country...

npx afnoui add combobox/combobox-user

Writes to 2 places

User Selector

Assign to...

npx afnoui add combobox/combobox-multiselect

Writes to 2 places

Multi-select (Manual logic)

Select tags...

npx afnoui add combobox/combobox-creatable

Writes to 2 places

Creatable Content

Select or create...

npx afnoui add command/command-basic

Writes to 2 places

Basic Command Menu

npx afnoui add command/command-palette

Writes to 2 places

Command Palette (Spotlight Style)

npx afnoui add command/command-theme-switcher

Writes to 2 places

Theme Switcher

npx afnoui add command/command-user-menu

Writes to 2 places

User Menu Command

John Doe

john@example.com

npx afnoui add command/command-compact

Writes to 2 places

Compact Command (No Input)

npx afnoui add command/command-inline

Writes to 2 places

Inline Command Menu

Quick actions:

npx afnoui add composite-input/composite-input-price

Writes to 2 places

Price Input with Currency

Price

npx afnoui add composite-input/composite-input-phone

Writes to 2 places

Phone Number with Country Code

Phone Number

npx afnoui add composite-input/composite-input-url

Writes to 2 places

URL Input with Protocol

Website URL

npx afnoui add composite-input/composite-input-icon-prefix

Writes to 2 places

Input with Icon Prefix

Website

npx afnoui add composite-input/composite-input-button-suffix

Writes to 2 places

Input with Button Suffix

Invite Link

npx afnoui add composite-input/composite-input-password

Writes to 2 places

Password with Toggle

Password

npx afnoui add composite-input/composite-input-select-suffix

Writes to 2 places

Input with Select Suffix

Quantity

npx afnoui add composite-input/composite-input-search

Writes to 2 places

Search with Category Filter

Search Products

npx afnoui add composite-input/composite-input-domain

Writes to 2 places

Domain Input

Subdomain

.example.com

Your site will be available at mysite.example.com

npx afnoui add composite-input/composite-input-credit-card

Writes to 2 places

Credit Card Input

Card Number

💳

Expiry

CVC

npx afnoui add dialog/dialog-basic

Writes to 2 places

Basic Dialog

npx afnoui add dialog/dialog-confirmation

Writes to 2 places

Confirmation / Delete Dialog

npx afnoui add dialog/dialog-form

Writes to 2 places

Form Dialog

npx afnoui add dialog/dialog-success

Writes to 2 places

Success / Status Dialog

npx afnoui add dialog/dialog-settings

Writes to 2 places

Settings Dialog

npx afnoui add dialog/dialog-image-upload

Writes to 2 places

File Upload Dialog

npx afnoui add dialog/dialog-scrollable

Writes to 2 places

Scrollable Content Dialog

npx afnoui add dropdown/dropdown-basic

Writes to 2 places

Basic Dropdown

npx afnoui add dropdown/dropdown-icon-only

Writes to 2 places

Icon Only

npx afnoui add dropdown/dropdown-keyboard-shortcuts

Writes to 2 places

Keyboard Shortcuts

npx afnoui add dropdown/dropdown-checkbox-items

Writes to 2 places

Checkbox Items

npx afnoui add dropdown/dropdown-radio-items

Writes to 2 places

Radio Items (Theme)

npx afnoui add dropdown/dropdown-radio-items-priority

Writes to 2 places

Radio Items (Priority)

npx afnoui add dropdown/dropdown-nested

Writes to 2 places

Nested Submenu

npx afnoui add dropdown/dropdown-user-account

Writes to 2 places

User Account

npx afnoui add dropdown/dropdown-context-actions

Writes to 2 places

Context Actions

Document.pdf

2.4 MB • Modified 2 hours ago

npx afnoui add form/form-sign-in

Writes to 2 places

Sign In

Enter your credentials to access your account.

Password

Remember me

npx afnoui add input/input-fields

Writes to 2 places

Input Fields

Password

Disabled

Message

npx afnoui add menubar/menubar-application

Writes to 2 places

Application Menubar

npx afnoui add menubar/menubar-editor

Writes to 2 places

Text Editor Menubar

npx afnoui add menubar/menubar-simple

Writes to 2 places

Simple Navigation

npx afnoui add navigation-menu/navigation-menu-advanced

Writes to 2 places

Advanced Multi-Level Navigation

Property Hub

npx afnoui add navigation-menu/navigation-menu-full

Writes to 2 places

Full Navigation Menu

npx afnoui add navigation-menu/navigation-menu-simple

Writes to 2 places

Simple Links Navigation

npx afnoui add navigation-menu/navigation-menu-mega

Writes to 2 places

Products Mega Menu

npx afnoui add popover/popover-basic

Writes to 2 places

Basic Popover

npx afnoui add popover/popover-positions

Writes to 2 places

Popover Positions

npx afnoui add popover/popover-date-picker

Writes to 2 places

Date Picker Popover

npx afnoui add popover/popover-form

Writes to 2 places

Form in Popover

npx afnoui add popover/popover-settings

Writes to 2 places

Settings Popover

npx afnoui add popover/popover-share

Writes to 2 places

Share Popover

npx afnoui add popover/popover-slider

Writes to 2 places

Slider in Popover

npx afnoui add progress/progress-linear

Writes to 2 places

Linear Progress

Loading...33%

Different Heights

npx afnoui add progress/progress-circular

Writes to 2 places

Circular Progress

25%

Small

50%

Medium

75%

Large

100%

Complete

npx afnoui add progress/progress-colored-circular

Writes to 2 places

Colored Circular Progress

Primary

Success

Warning

Error

npx afnoui add progress/progress-ring

Writes to 2 places

Ring/Donut Progress

0percent

100percent

npx afnoui add progress/progress-semi-circular

Writes to 2 places

Semi-circular & Indeterminate

65%

Semi-circular

Indeterminate

Spinner Icon

Refresh Spin

npx afnoui add progress/progress-styled

Writes to 2 places

Styled Progress Bars

Gradient

Striped (Animated)

Segmented (5)

Segmented (10)

npx afnoui add progress/progress-step

Writes to 2 places

Step Progress

npx afnoui add progress/progress-system-indicators

Writes to 2 places

System Indicators

75%

npx afnoui add progress/progress-contextual-cards

Writes to 2 places

Contextual Progress Cards

Downloading...

project-assets.zip

Uploading...

3 of 5 files

60%

Storage Used

7.5 GB of 10 GB

75%

Profile Completion

4/5 steps

npx afnoui add radio/radio-basic

Writes to 2 places

Radio Group

Default

Comfortable

Compact

npx afnoui add scroll-area/scroll-area-basic

Writes to 2 places

Basic Scroll Area

Notifications

Your call has been confirmed.

1 hour ago

You have a new message!

2 hours ago

Your subscription is expiring soon!

5 hours ago

Payment received successfully.

1 day ago

New feature available.

2 days ago

Weekly report is ready.

3 days ago

Security update applied.

4 days ago

Team member joined.

5 days ago

npx afnoui add scroll-area/scroll-area-horizontal

Writes to 2 places

Horizontal Scroll

Abstract Waves
John Doe · $299

Mountain Sunset
Jane Smith · $450

City Nights
Mike Chen · $375

Ocean Dreams
Sarah Lee · $520

Forest Path
Tom Wilson · $280

Desert Storm
Anna Brown · $390

npx afnoui add scroll-area/scroll-area-code-block

Writes to 2 places

Code Block

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

function useUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await fetch('/api/users');
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    }

    fetchUsers();
  }, []);

  return { users, loading, error };
}

export default useUsers;

npx afnoui add scroll-area/scroll-area-chat

Writes to 2 places

Chat Messages

Team Chat

Alice

Hey team! 👋

10:30 AM

Hi Alice! How's the project going?

10:32 AM

Alice

Going well! Just finished the design review.

10:33 AM

Bob

Great work everyone!

10:35 AM

Thanks! Let's sync up later today.

10:36 AM

Alice

Sounds good. How about 3 PM?

10:38 AM

Perfect! 👍

10:39 AM

npx afnoui add scroll-area/scroll-area-both

Writes to 2 places

Both Directions

ID	Name	Email	Status	Role
1	User 1	user1@example.com	Active	Admin
2	User 2	user2@example.com	Inactive	User
3	User 3	user3@example.com	Active	User
4	User 4	user4@example.com	Inactive	Admin
5	User 5	user5@example.com	Active	User
6	User 6	user6@example.com	Inactive	User
7	User 7	user7@example.com	Active	Admin
8	User 8	user8@example.com	Inactive	User
9	User 9	user9@example.com	Active	User
10	User 10	user10@example.com	Inactive	Admin
11	User 11	user11@example.com	Active	User
12	User 12	user12@example.com	Inactive	User
13	User 13	user13@example.com	Active	Admin
14	User 14	user14@example.com	Inactive	User
15	User 15	user15@example.com	Active	User

npx afnoui add select/select-basic

Writes to 2 places

Select Component

Theme

npx afnoui add separator/separator-basic

Writes to 2 places

Basic Separator

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

npx afnoui add separator/separator-horizontal

Writes to 2 places

Horizontal Separator

Account Settings

Manage your account preferences and settings.

Privacy

Control who can see your profile and activity.

Notifications

Choose what notifications you want to receive.

npx afnoui add separator/separator-vertical

Writes to 2 places

Vertical Separator

npx afnoui add separator/separator-navigation

Writes to 2 places

Navigation Separator

npx afnoui add separator/separator-with-label

Writes to 2 places

With Label

Or continue with

npx afnoui add separator/separator-profile-card

Writes to 2 places

Profile Card Separator

John Doe

john@example.com

128

Posts

1.2k

Followers

384

Following

npx afnoui add separator/separator-form-section

Writes to 2 places

Form Section Separator

Personal Information

Contact Details

Preferences

npx afnoui add separator/separator-footer

Writes to 2 places

Footer Links

npx afnoui add sheet/sheet-right

Writes to 2 places

Right Side Sheet

npx afnoui add sheet/sheet-sides

Writes to 2 places

Side Variations

npx afnoui add sheet/sheet-mobile-nav

Writes to 2 places

Mobile Navigation

npx afnoui add sheet/sheet-cart

Writes to 2 places

Shopping Cart

npx afnoui add sheet/sheet-filter

Writes to 2 places

Filter Panel

npx afnoui add sheet/sheet-notifications

Writes to 2 places

Notifications Panel

npx afnoui add slider/slider-basic

Writes to 2 places

Slider Component

Volume

Price Range

npx afnoui add tabs/tabs-basic

Writes to 2 places

Tabs Component

Account

Make changes to your account here.

Name

Username

npx afnoui add toggle/toggle-basic

Writes to 2 places

Basic Toggle

npx afnoui add toggle/toggle-variants

Writes to 2 places

Toggle Variants

npx afnoui add toggle/toggle-sizes

Writes to 2 places

Toggle Sizes

npx afnoui add toggle/toggle-with-text

Writes to 2 places

Toggle With Text

npx afnoui add toggle/toggle-controlled

Writes to 2 places

Controlled Toggle

Bold is off

npx afnoui add toggle/toggle-text-alignment-group

Writes to 2 places

Text Alignment Toggle Group

npx afnoui add toggle/toggle-multiple-selection

Writes to 2 places

Multiple Selection

npx afnoui add toggle/toggle-view-switcher

Writes to 2 places

View Switcher

npx afnoui add toggle/toggle-theme-switcher

Writes to 2 places

Theme Switcher

npx afnoui add toggle/toggle-list-type

Writes to 2 places

List Type Toggle

npx afnoui add toggle/toggle-media-controls

Writes to 2 places

Media Player Controls

npx afnoui add toggle/toggle-group-sizes

Writes to 2 places

Toggle Group Sizes

npx afnoui add tooltip/tooltip-basic

Writes to 2 places

Basic Tooltips

npx afnoui add tooltip/tooltip-arrows

Writes to 2 places

Arrow Tooltips

npx afnoui add tooltip/tooltip-positions

Writes to 2 places

Tooltip Positions

npx afnoui add tooltip/tooltip-styled

Writes to 2 places

Styled Tooltips

npx afnoui add tooltip/tooltip-rich-content

Writes to 2 places

Rich Content Tooltips

npx afnoui add tooltip/tooltip-toolbar

Writes to 2 places

Interactive Toolbar

npx afnoui add tooltip/tooltip-shortcuts

Writes to 2 places

Keyboard Shortcuts

npx afnoui add tooltip/tooltip-status-indicators

Writes to 2 places

Status Indicator Tooltips

Online

Degraded

Offline

Theme Editor

Light Mode

Export will use this format

Background

hsl(0 0% 100%)

Foreground

hsl(220 20% 10%)

Primary

hsl(160 84% 39%)

Primary Text

hsl(0 0% 100%)

Secondary

hsl(220 14% 96%)

Secondary Text

hsl(220 20% 20%)

Muted

hsl(220 14% 96%)

Muted Text

hsl(220 10% 46%)

Accent

hsl(160 60% 95%)

Accent Text

hsl(160 84% 25%)

Destructive

hsl(0 72% 51%)

Destructive Text

hsl(0 0% 100%)

Border

hsl(220 13% 91%)

Input Border

hsl(220 13% 91%)

Focus Ring

hsl(160 84% 39%)

Card

hsl(0 0% 99%)

Card Text

hsl(220 20% 10%)

All Components

Heads up!

Error

Create Project

Notifications

Total Revenue

Subscriptions

Sales

Active Now

Starter

Pro

Enterprise

John Doe

Sarah Miller

Notifications

Project Progress

Team Standup

Free

Pro

Enterprise

Activity Log

Sign In

Tags

Notifications

Team Chat

Radix Primitives

Account Settings

Privacy

Notifications

Personal Information

Contact Details

Preferences

Account

Theme Editor

Is it accessible?

Is it styled?

Is it animated?

Can I open multiple items?

Is it still accessible?

Heads up!

Error

Create Project

Notifications

Total Revenue

Subscriptions

Sales

Active Now

Starter

Pro

Enterprise

John Doe

Sarah Miller

Notifications

Project Progress

Team Standup

Free

Pro

Enterprise

Activity Log

Sign In

Tags

Notifications

Team Chat

Radix Primitives

Account Settings

Privacy

Notifications

Personal Information

Contact Details

Preferences

Account

Theme Editor

Core Colors

UI Colors

Component Colors

Border Radius

Typography

Spacing

Effects

Component Sizing