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

Phone

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

bob.fyi

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

bob.fyi

Browser

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

Default — scroll

Autoplay — pill progress + play/pause

Fade — crossfade transitions

Autoplay + Fade

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

GitHub Figma

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.

demo-wrap.tsx

<Demo title="Overflow: wrap" centerContent={false}>
  <article className="max-w-2xl space-y-3">
    <p>...lorem ipsum...</p>
    <p>...lorem ipsum...</p>
  </article>
</Demo>

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.

demo-scroll.tsx

<Demo maxHeight={220} overflowBehavior="scroll" centerContent={false}>
  <div className="min-w-176 space-y-3">
    <p>...lorem ipsum...</p>
  </div>
</Demo>

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.

demo-resize.tsx

<Demo overflowBehavior="resize" centerContent={false}>
  <article className="space-y-3">
    <p>...lorem ipsum...</p>
  </article>
</Demo>

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.

demo-wrap-long.tsx

<Demo centerContent={false}>
  <p>...very long single line...</p>
</Demo>

Info Tip

Hover for more info

Help variant

Mode Toggle

Toggle between light and dark themes

Number Slider

Opacity

Stats

Revenue

$45.2K

↑ 12% from last month

Users

2,340

↑ 8% from last month

Bounce Rate

24%

↓ 3% from last month

Color Swatch Group

Selected: #3b82f6

Icons

Image

Click the expand icon to view fullscreen.

Mark Note

Each ramp is centered on a 500 step, which sits at roughly 5.2:1 contrast vs white.

A target derived from our brand teal.

This approach to reactions led users to discover ‘emoji battles’, a spontaneous game hidden as a fun easter egg that a tiny physics engine drives on screen. Friends intentionally caused these collisions, transforming reactions into something totally different.

still can't believe we made this

Video

Custom video player built on media-chrome with themed toolbar controls, play/pause overlay, fullscreen, and optional volume.