Badge

DefaultSecondaryOutlineDestructiveGhostLink

Card

Card Title

A short description for this card.

Card content goes here. You can put any content inside.

Small Card

Compact variant.

Less padding, smaller typography.

Device Frame

Preview content inside the frame. Use for screenshots, demos, or embedding app/website mockups.

9:41

80

bob.fyi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget nulla vitae nisl condimentum tempor.

9:41

80

bob.fyi

Separator

Content above

Content below

Left

Center

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Data List

orientation="horizontal" (default)

Status: Authorized
ID: u_2J89JSA4GJ
Name: Vlad Moroz
Email: vlad@workos.com
Company: WorkOS

orientation="vertical"

Status: Active
Role: Principal Designer
Location: Washington, DC

Description List

Status: Active
Role: Principal Designer
Location: Washington, DC

Alert

Heads up!

You can add components to your app using the CLI.

New update available

A new version has been released with performance improvements.

New update available

A new version has been released with performance improvements.

Error

Your session has expired. Please log in again.

Destructive action

This will permanently delete your account data.

Avatar

RWSMLG

ABC

+3

Carousel

1

2

3

4

Checkbox

Accept terms and conditionsSend me marketing emailsDisabled option

Code

npm installnpx shadcn@latest addvariant="plain"

Use the cn() utility for class merging. The inline variant wraps text in backticks. Or use the color code component for inline HEX .

Combobox

Copy Button

Click to copy "Hello, world!"

Input Group

https://

USD

Item

John Doe

Senior Designer at Acme Inc.

Active

Jane Smith

Engineering Manager

Away

Kbd

⌘⌘⌘KCtrlShiftP

Number Field

Quantity

Slider

40

Switch

Airplane modeSmall switchDisabled

Heading Levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Link Out

GitHubFigma

Back Button

↰Projects ↰Home

Code Block

styles.css

.button {
  background: var(--primary);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}

Demo

Overflow: wrap (default)

wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Long prose wraps naturally with centered layout disabled.

Overflow: scroll + maxHeight

scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Constrained height with vertical and horizontal scrolling support.

Overflow: resize

resize

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Drag the handle to resize horizontally and observe reflow.

Overflow: wrap (long line)

wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Content wraps naturally within the card - no scrolling, no resize handle.

↑ 12% from last month

Users

2,340

↑ 8% from last month

Bounce Rate

24%

↓ 3% from last month