Components

accordion

Collapsible content panels built on native <details>.

js: none

alert

Inline message banner with icon, title, description.

js: none

alert-dialog

Confirmation modal for destructive actions.

js: trigger

aspect-ratio

Lock an element to a width/height ratio.

js: none

avatar

Image with text fallback. Sizes, ring, square, group.

js: none

badge

Inline status indicator.

js: none

breadcrumb

Hierarchical navigation trail.

js: none

button

The primary action trigger. 6 variants, 4 sizes, loading + icon + group modes.

js: none

calendar

Pure-CSS month calendar. Day cells with today/selected/disabled states.

js: consumer

card

Container with header, content, footer zones.

js: none

carousel

Scroll-snap carousel with optional dots.

js: consumer

checkbox

Native checkbox styled to match shadcn. Supports indeterminate.

js: none

collapsible

Standalone collapsible (like accordion but unstyled).

js: none

command

Command palette UI shell. Pair with Popover API for ⌘K.

js: consumer

container

Centered, max-width page/content wrapper with responsive padding.

js: none

context-menu

Right-click menu. Uses Popover API + inline oncontextmenu.

js: consumer

dialog

Native <dialog> modal. Backdrop blur, slide-in animation.

js: trigger

drawer

Side panel sliding from any edge. Built on <dialog>.

js: trigger

dropdown

Menu of actions. Uses Popover API via popovertarget attribute.

js: trigger

empty

Placeholder for empty states.

js: none

field

Higher-level form field wrapper with label, description, and validation error.

js: none

hover-card

Rich tooltip showing on hover. Contains header, body, footer.

js: none

input

Single-line text input. Leading/trailing icon support.

js: none

input-otp

One-time-password input boxes.

js: consumer

kbd

Keyboard shortcut indicator.

js: none

label

Form label with required, muted variants.

js: none

menubar

Horizontal menu bar with dropdown submenus.

js: trigger

navigation-menu

Horizontal nav with dropdown panels of links.

js: none

pagination

Page navigation.

js: none

popover

Floating panel with arbitrary content.

js: trigger

progress

Native <progress> restyled.

js: none

radio

Native radio styled to match shadcn.

js: none

radio-group

Card-style radio group with label and description per option.

js: none

resizable

Panel group with drag handles. Visual + a11y only — pair with 10 lines of JS for actual resize.

js: consumer

scroll-area

Restyled scroll container with thin custom scrollbar.

js: none

select

Native <select> restyled with CSS-only chevron.

js: none

separator

Horizontal or vertical divider.

js: none

sheet

Wider drawer for full-page experiences. Built on <dialog>.

js: trigger

sidebar

Modern app sidebar. Header, content, footer, collapsible, mobile slide-in.

js: none

skeleton

Loading placeholder with shimmer animation.

js: none

slider

Restyled native range input with filled track.

js: consumer

sonner

Rich toast with title, description, action. Auto-dismisses.

js: trigger

spinner

Pure CSS loading spinner.

js: none

switch

Toggle switch built on <input type=checkbox>.

js: none

table

Restyled HTML table. Hover rows, alignment, sticky header.

js: none

tabs

Pure CSS tabs using radios + :has(). No JS.

js: none

textarea

Multi-line text input.

js: none

toast

Auto-dismissing notification. Built on Popover API.

js: trigger

toggle

Two-state button with aria-pressed.

js: consumer

toggle-group

Group of single/multi-select toggles via radios/checkboxes.

js: none

tooltip

Hover/focus tooltip with 4 positions. Pure CSS via ::after.

js: none

typography

Prose styles for long-form text. Drop on blog posts / docs.

js: none