Design

Alert Dialog

Sizes

With Media

Destructive

Aspect Ratio

Ratios

White concrete wall by Oleg Laptev on Unsplash

Avatar

Sizes

NLNLNL

With Badge

JZJZJZ

PPPPPP

Groups

CNLRER

+3

CNLRER

+3

CNLRER

+3

CNLRER

Badge

Variants

DefaultSecondaryDestructiveOutlineGhostLink

With Icons

DefaultSecondaryDestructiveOutlineGhostLink

As Link

Link Link Link Link

Custom Colors

BlueGreenSkyPurpleBlueGreenSkyPurpleRed

Buttons

Variants & Sizes

Icon Right

Icon Left

Icon Only

Card

Sizes

Default Card

This card uses the default size variant.

The card component supports a size prop that defaults to "default" for standard spacing and sizing.

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

With Border

Header with Border

This is a card with a header that has a bottom border.

The header has a border-b class applied, creating a visual separation between the header and content sections.

The footer has a border-t class applied, creating a visual separation between the content and footer sections.

Header with Border

This is a small card with a header that has a bottom border.

The header has a border-b class applied, creating a visual separation between the header and content sections.

The footer has a border-t class applied, creating a visual separation between the content and footer sections.

With Image

Pink and yellow abstract painting on Unsplash

Beautiful Landscape

A stunning view that captures the essence of natural beauty.

Beautiful Landscape

A stunning view that captures the essence of natural beauty.

Code Block

Basic

pnpm install
pnpm dev
pnpm lint
pnpm test

With Title

components/primary-button.tsx

type ButtonProps = {
  label: string
  onClick: () => void
}

export function PrimaryButton({ label, onClick }: ButtonProps) {
  return (
    <button className='rounded-lg bg-primary px-4 py-2 text-primary-foreground' onClick={onClick}>
      {label}
    </button>
  )
}

Command

Dialog

Drawer

Dropdown Menu

Field

Input Fields

Textarea Fields

Select Fields

Switch Fields

Airplane Mode

Turn on airplane mode to disable all connections.

Disabled Switch

Invalid Switch

Input Group

Basic

With Addons

With Buttons

With Tooltip, Dropdown, Popover

With Kbd

12 results

Disabled

In Card

Card with Input Group

This is a card with an input group.

Textarea

Input

Basic

With Label

With Description

Input Types

With Select

With Button

Form

Kbd

Basic

Ctrl⌘KCtrl + B

Modifier Keys

⌘C

KbdGroup

CtrlShiftP

Arrow Keys

↑↓←→

With Icons

With Icons and Text

LeftVoice Enabled

Input Group

Space

Tooltip

With samp

File

Label

With Input

Disabled

With Textarea

Marquee

Horizontal

Next.jsTypeScriptTailwindDesign SystemsMotionAccessibilityPerformanceSEO

Vertical

Design review

Today · 2:00 PM

Release checklist

Tomorrow · 9:00 AM

Content pass

Thu · 1:30 PM

QA sweep

Fri · 11:00 AM

Launch prep

Fri · 4:00 PM

Design review

Today · 2:00 PM

Release checklist

Tomorrow · 9:00 AM

Content pass

Thu · 1:30 PM

QA sweep

Fri · 11:00 AM

Launch prep

Fri · 4:00 PM

Popover

Basic

Sides

With Form

Alignments

In Dialog

Scroll Area

Vertical

Segment Group

Select

Basic

Sizes

With Icons

With Groups & Labels

Item Aligned

Separator

Horizontal

shadcn/ui

The Foundation for your Design System

A set of beautifully designed components that you can customize, extend, and build on.

Vertical

Blog

Docs

Source

Vertical Menu

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

In List

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

Sheet

With Form

No Close Button

Sides

Sidebar

Basic

Skeleton

Avatar

Card

Text

Form

Table

Sonner

Basic

With Description

Types

Spinner

Basic

In Buttons

In Badges

BadgeBadgeBadgeBadge

In Input Group

Switch

Table

Basic

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

With Footer

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$2,500.00

Simple

Name	Email	Role
Sarah Chen	sarah.chen@acme.com	Admin
Marc Rodriguez	marcus.rodriguez@acme.com	User
Emily Watson	emily.watson@acme.com	User

With Badges

Task	Status	Priority
Design homepage	Completed	High
Implement API	In Progress	Medium
Write tests	Pending	Low

With Actions

Product	Price	Actions
Wireless Mouse	$29.99
Mechanical Keyboard	$129.99
USB-C Hub	$49.99

With Select

Task	Assignee	Status
Design homepage		In Progress
Implement API		Pending
Write tests		Not Started

With Input

Product	Quantity	Price
Wireless Mouse		$29.99
Mechanical Keyboard		$129.99
USB-C Hub		$49.99

Tabs

Basic

Manage your account preferences and profile information.

Line

Manage your account preferences and profile information.

Textarea

Basic

With Label

With Description

Tooltip

Basic

Sides

With Icon

Long Content

Disabled

With Keyboard Shortcut

On Link

Learn more

Formatted Content

Tree View

Basic

workspace

notes

Explore the design system and UI components used throughout this website. View component variants, styles, and implementation examples.

Alert Dialog

Aspect Ratio

Avatar

Badge

Buttons

Card

Code Block

Command

Dialog

Drawer

Dropdown Menu

Field

Input Group

Input

Kbd

Label

Marquee

Popover

Scroll Area

Tags

Segment Group

Select

Separator

Sheet

Sidebar

Skeleton

Sonner

Spinner

Switch

Table

Tabs

Textarea

Tooltip

Tree View

Design

Explore the design system and UI components used throughout this website. View component variants, styles, and implementation examples.

Alert Dialog

Aspect Ratio

Avatar

Badge

Buttons

Card

Code Block

Command

Command Palette

Dialog

Drawer

Dropdown Menu

Field

Input Group

Input

Kbd

Label

Marquee

Popover

Scroll Area

Tags

Segment Group

Select

Separator

Sheet

Sidebar

Skeleton

Sonner

Spinner

Switch

Table

Tabs

Textarea

Tooltip

Tree View

Tree View