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 Clear

Button

Primary, secondary, bordered, clear, 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

⌘ + K

Kbd

Keyboard keys, shortcuts, combinations

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

Color Picker

Swatches, input, presets, opacity

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

Sheet

Slide-in panel from any edge

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

16:9

1:1

4:3

Aspect Ratio

16:9, 4:3, 1:1, gallery grid

Resizable

Split panes, drag handle, nested

Media

Image, video, YouTube embed

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

Page Layout

Stacked, sidebar+content, holy grail

Success

Changes saved successfully

Toast

Notifications, success, error, with action

Progress

Determinate bar, with label, animated

2

3

4

Stepper

Step indicator, horizontal, vertical

Order placed

Payment confirmed

Shipped

Delivered

Timeline

Events, status, icons, cards

Skeleton

Loading placeholders, card, list

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

Settings Done

NavigationBar

iOS-style top bar, back, title, actions

Home

Search

Chat

Profile

TabBar

iOS-style bottom tabs, icons, badges

▼ 📁 src

▶ 📁 components

📄 index.ts

Tree View

File explorer, nested navigation

Add to library

Hover me

Tooltip

Hover hints, positions, shortcuts

Profile

Settings

Billing

Logout

Dropdown Menu

Actions, icons, shortcuts, nested

Back

Forward

Reload

View Source

Context Menu

Right-click, icons, submenu

Type a command...

Calendar

Search

Settings

Command

Command palette, search, shortcuts

@nextjs

@nextjs

The React Framework

Hover Card

Preview on hover, profile, product

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

A

Hey, how are you?

I'm great, thanks!

A

That's awesome!

Chat Bubble

Messages, typing, status, group chat

Welcome!

Onboarding Flow

Welcome, steps, profile, interests

Free

$0

/mo

Popular

Pro

$19

/mo

Pricing Card

Tiers, toggle, features, highlighted

Everything you need

Fast

Secure

Sync

Feature Section

Icon grid, left-right, cards, steps

"This product transformed our workflow completely."

Sarah J.

Testimonial

Quote, avatar, rating, grid, featured