Components

All 32 UI components — shadcn/ui primitives plus custom compound components.

Primitives

Base shadcn/ui components.

Accordion

Alert Dialog

Avatar

JDASBK

Badge

DefaultSecondaryOutlineDestructive

Button

Card

Card Title

Card description goes here.

This is the card content area.

Dialog

Dropdown Menu

Progress

Scroll Area

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Separator

Above the separator

Below the separator

Sheet

Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User

Toast (Sonner)

Tooltip

Theme Toggle

Click to cycle light / dark / system

Form Components

Inputs, selects, and controls.

Input

Name

Textarea

Message

Select

Choose an option

Checkbox

Accept terms and conditions

Radio Group

Option 1

Option 2

Option 3

Switch

Enable notifications

Compound Components

Custom multi-part components for specific use cases.

Stat Card

👥

1,234

Total Users

+12%vs last week

💰

$56.7k

Revenue

-3%vs last week

📦

Orders

0%vs last week

Metric Card

Steps

👟

8,500steps

85% of goal

Entry Card

🏃

Morning Run

Today at 7:30 AM

5.2km

💧

Water

Today

6glasses

Post Card

Getting Started with Next.js

Learn how to build modern web applications with Next.js.

April 4, 2026

Product Card

New

Zip Up Hoodie

$55.00

Cart Item

Zip Up Hoodie — Black / M

$110.00

Progress Ring

75%

42%

100%

Prose

This is a Heading

Prose provides consistent typography for HTML content like blog posts.

Styled blockquote with left border.

Inline code and bold text.