Overview

Colors

Palette & design tokens

Heading

Body text in Inter

OVERLINE

Typography

Inter font scale, weights, hierarchy

sm

md

xl

full

Border Radius

None, sm, default, md, lg, xl, 2xl, 3xl, full

4

8

16

24

32

48

Spacing

0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48...

Primary Bordered Ghost

Button

Primary, secondary, bordered, ghost, danger

Day

Week

Month

Button Group

Joined buttons, split, icons, vertical

Default Secondary Bordered

Badge

Status indicators, tags, labels

+3

Avatar

Image, fallback, status, group

AJ

SC

ML

+5

Avatar Group

Stacked avatars, initials, status

Content

More content

Separator

Horizontal, vertical, with label

Selected Label

Chip

Filter chips, input tags, removable

Default link Muted link External

Link

Inline, external, nav links, link cards

Input

Text, email, password, with icons

TextArea

Multi-line text input

Checked

Unchecked

Checkbox

Check/uncheck, with label, disabled

Option A

Option B

RadioGroup

Single selection, card style, horizontal

Slider

Range input with value labels

Select option...

Select

Dropdown picker with groups

Pick a date

DatePicker

Calendar, range, presets

Search...

Combobox

Search + select, groups, multi-select

Drag & drop files

File Upload

Drop zone, file list, progress

Switch

iOS-style, sizes, colors, in card

4

2

8

–

1

5

OTP Input

Verification code, separator, sizes

(128)

Rating

Stars, half stars, sizes, hearts

− 3 +

Number Input

Increment/decrement stepper

Submit

Form

Layout, validation, helper text

Card Title

Card description goes here

Content area

Card

Header, content, footer, variants

Cancel

Save

Dialog

Modal window, alert, confirmation

Open popover

Popover

Floating content panel on click

Account

Password

Tabs

Pill tabs, underline tabs, content panels

Is it accessible?

Yes. It adheres to WAI-ARIA.

Is it styled?

Is it animated?

Accordion

Collapsible sections, single/multiple, icons

Show more

@radix-ui/primitives

@radix-ui/colors

Collapsible

Expand/collapse, nested, animated

Slide 1 of 5

Carousel

Slides, indicators, multiple views

ScrollView

Custom scrollbar, auto-hide, indicators

Resizable

Split panes, drag handle, nested

Logo

Home About

Sign In

Header

Site navbar, centered, transparent, actions

© 2026 Brand

Footer

Multi-column, simple, newsletter, compact

Dashboard

Projects

Team

Settings

Sidebar

Navigation, groups, collapsible, compact

Success

Changes saved successfully

Toast

Notifications, success, error, with action

Progress

Determinate bar, with label, animated

Spinner

Loading indicator, sizes

Heads up!

You can add components

Alert

Info, success, warning, danger

Update available

Changes saved

Trial expiring

Banner

Info, success, warning, error, action

3

AJ

Notification Badge

Dots, counts, colors, on avatars

Home Products T-Shirts

Breadcrumb

Navigation path, icons, truncated

Prev

1

2

3

Next

Pagination

Pages, prev/next, compact, icons

Toolbar

Action buttons, groups, separators

▼ 📁 src

▶ 📁 components

📄 index.ts

Tree View

File explorer, nested navigation

Add to library

Hover me

Tooltip

Hover hints, positions, arrows

Profile

Settings

Billing

Logout

Dropdown Menu

Actions, icons, badges, nested

Type a command...

Calendar

Search

Settings

Command

Command palette, search, groups

General

Privacy

Notifications

List

Items, descriptions, icons, dividers

Invoice Status Amount

INV-001 Paid $250

INV-002 Due $150

Table

Columns, rows, status badges, sorting

javascript

const greet = () =>

  console.log("Hi");

Code Block

Syntax, line numbers, copy, terminal

No documents

Get started by creating

EmptyState

No data, no results, empty inbox

Name Status Amount

Alice Paid $250

Bob Due $180

Data Table

Sorting, selection, striped, pagination

Feb 2026

SuMoTuWeThFrSa

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Calendar

Month view, range, events, mini

Revenue

$45,231

+12.5%

Users

2,350

-3.2%

Stats Card

Metrics, sparkline, progress, icons

Free

$0

/mo

Popular

Pro

$19

/mo

Pricing Card

Tiers, toggle, features, highlighted

"This product transformed our workflow completely."

Sarah J.

Testimonial

Quote, avatar, rating, grid, featured