Live Shadcn Preview

Button

xs
sm
default
lg
icon-xs
icon-sm
icon
icon-lg

Input

Card

Card Title
A brief description of the card content.

Card content goes here.

Badge

DefaultSecondaryDestructiveOutlineGhostLink

Tabs

Default (pills)

Content for tab 1.

Line

Content for tab 1.

Select

Size default
Size sm

Dialog

Dropdown Menu

Checkbox

Switch

Radio Group

Textarea

Label

Avatar

Sizes
CNCNCN

Progress

Skeleton

Alert

Heads up
You can add components to your app using the cli.
Error
Something went wrong. Please try again.

Separator

Content above

Content below

Accordion

Tooltip

Popover

Hover Card

Sheet

Drawer

Breadcrumb

  1. Home
  3. Components
  5. Breadcrumb

Pagination

  • Previous
  • 1
  • 2
  • More pages
  • Next

Table

NameStatus
Item 1Active
Item 2Pending

Slider

Toggle

Size sm
Size default
Size lg

Toggle Group

Size sm
Size default
Size lg

Button Group

Carousel

1
2
3

Calendar

August 2026
SuMoTuWeThFrSa

Navigation Menu

  • Components

Menubar

Collapsible

Scroll Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Resizable

Panel 1
Panel 2

Aspect Ratio

16:9

Empty

Media variant: icon
No items
Get started by creating a new item.
Media variant: default
No items
Get started by creating a new item.

Kbd

Press ⌘ + K to open command palette.

Input OTP

Native Select

Size default
Size sm

Spinner

Sizes