Shadcn UI Cheatsheet

Every shadcn/ui component on one page: what it is for, the exact CLI command that installs it, and a link to full examples for both Base UI and Radix. Install commands are the real ones from each component's own page, not a guess at the naming.

New to the CLI? Start with installation and components.json. Unsure which primitive to install against, Base UI or Radix? See Base UI vs Radix.

The whole set in one command

npx shadcn@latest add accordion alert alert-dialog aspect-ratio avatar badge \
  breadcrumb button button-group calendar card carousel chart checkbox \
  collapsible command context-menu dialog drawer dropdown-menu empty field \
  form hover-card input input-group input-otp item kbd label marker menubar \
  message message-scroller native-select navigation-menu pagination popover \
  progress radio-group resizable scroll-area select separator sheet sidebar \
  skeleton slider sonner spinner switch table tabs textarea toggle \
  toggle-group tooltip

Three entries below are patterns rather than single components — Combobox, Date Picker and Data Table each compose two or three of the above. Typography ships as utility-class recipes with nothing to install.

Buttons and actions

Component	Install	Use it for
Button	npx shadcn@latest add button	Actions and links — six variants, four sizes, icons, loading, as-link
Button Group	npx shadcn@latest add button-group	Joining related buttons into one connected control
Toggle	npx shadcn@latest add toggle	A two-state button with a pressed / unpressed state
Toggle Group	npx shadcn@latest add toggle-group	A set of related two-state buttons
Kbd	npx shadcn@latest add kbd	Rendering keyboard keys and shortcuts consistently

Forms and inputs

Component	Install	Use it for
Form	npx shadcn@latest add form	Wiring React Hook Form + Zod to accessible fields
Field	npx shadcn@latest add field	Label, description and error in one consistent structure
Input	npx shadcn@latest add input	Single-line text entry
Input Group	npx shadcn@latest add input-group	Attaching a leading icon, prefix or trailing button to an input
Input OTP	npx shadcn@latest add input-otp	One-time-password entry, one slot per digit
Textarea	npx shadcn@latest add textarea	Multi-line text entry
Label	npx shadcn@latest add label	Naming a form control
Select	npx shadcn@latest add select	Picking one option from a styled list
Native Select	npx shadcn@latest add native-select	A styled wrapper around the browser's own <select>
Combobox	npx shadcn@latest add popover command button	Searchable single-select — composes Popover + Command + Button
Checkbox	npx shadcn@latest add checkbox	Boolean choices
Radio Group	npx shadcn@latest add radio-group	Exactly one choice from a visible set
Switch	npx shadcn@latest add switch	A single on/off setting
Slider	npx shadcn@latest add slider	Picking a value in a range by dragging
Calendar	npx shadcn@latest add calendar	An inline date picker, built on react-day-picker
Date Picker	npx shadcn@latest add calendar popover button	A compact date control — composes Calendar + Popover + Button

Overlays and menus

Component	Install	Use it for
Dialog	npx shadcn@latest add dialog	Modal overlay for focused tasks: confirmations, forms, detail views
Alert Dialog	npx shadcn@latest add alert-dialog	Confirmations that need an explicit choice
Sheet	npx shadcn@latest add sheet	A panel sliding in from a screen edge
Drawer	npx shadcn@latest add drawer	A draggable panel sliding up from the bottom, built on Vaul
Popover	npx shadcn@latest add popover	Rich floating content anchored to a trigger, on click
Hover Card	npx shadcn@latest add hover-card	A rich preview on hovering a link or name
Tooltip	npx shadcn@latest add tooltip	A short label on hover or focus
Dropdown Menu	npx shadcn@latest add dropdown-menu	A list of actions triggered by a button
Context Menu	npx shadcn@latest add context-menu	Actions on right-click or long-press
Menubar	npx shadcn@latest add menubar	A desktop-style application menu bar
Command	npx shadcn@latest add command	A fast searchable command palette, built on cmdk

Navigation and layout

Component	Install	Use it for
Navigation Menu	npx shadcn@latest add navigation-menu	Primary site nav whose items open panels of links
Sidebar	npx shadcn@latest add sidebar	A composable, collapsible app navigation panel
Breadcrumb	npx shadcn@latest add breadcrumb	Showing where a page sits in the hierarchy
Pagination	npx shadcn@latest add pagination	Moving between pages of results
Tabs	npx shadcn@latest add tabs	Switching between related panels in the same space
Accordion	npx shadcn@latest add accordion	Multiple collapsible sections
Collapsible	npx shadcn@latest add collapsible	Toggling one region open and closed
Resizable	npx shadcn@latest add resizable	Panel layouts the user resizes by dragging
Scroll Area	npx shadcn@latest add scroll-area	A consistent styled scrollbar across browsers
Carousel	npx shadcn@latest add carousel	A swipeable slider, built on Embla
Separator	npx shadcn@latest add separator	A dividing line between content or controls
Aspect Ratio	npx shadcn@latest add aspect-ratio	Locking content to a fixed width-to-height ratio

Data display

Component	Install	Use it for
Table	npx shadcn@latest add table	Styled, semantic table primitives
Data Table	npx shadcn@latest add table	Sorting, filtering, pagination and selection — Table + TanStack Table
Chart	npx shadcn@latest add chart	Themed charts, built on Recharts
Card	npx shadcn@latest add card	Grouping related content and actions on a bordered surface
Item	npx shadcn@latest add item	A list row with media, title, description and trailing actions
Badge	npx shadcn@latest add badge	Status, categories, counts and tags
Avatar	npx shadcn@latest add avatar	A user photo with a fallback to initials or an icon
Typography	—	Utility-class recipes for long-form content

Feedback and status

Component	Install	Use it for
Alert	npx shadcn@latest add alert	Inline callouts for notes, warnings and errors
Toast (Sonner)	npx shadcn@latest add sonner	Brief, non-blocking notifications that dismiss themselves
Progress	npx shadcn@latest add progress	How far a determinate task has advanced
Spinner	npx shadcn@latest add spinner	An indeterminate loading indicator
Skeleton	npx shadcn@latest add skeleton	An animated placeholder while content loads
Empty	npx shadcn@latest add empty	An empty state with icon, title, description and next action

Conversation and AI interfaces

Component	Install	Use it for
Message	npx shadcn@latest add message	A single turn in a conversation
Message Scroller	npx shadcn@latest add message-scroller	A chat scroll container that anchors turns and follows streamed responses
Marker	npx shadcn@latest add marker	An inline status, system note or labeled separator in a thread

Where to go next

• Component overview — the same list with full pages: every variant, prop table, accessibility notes and copy-paste examples.
• Base UI vs Radix — which primitive to build against, and where the two APIs differ.
• ShadcnStore blocks — these components already assembled into hero sections, pricing tables, dashboards, checkout forms and data tables.
• Templates — complete Next.js applications built from them.

FAQ

How do I install every shadcn component at once?

Pass every component name to a single npx shadcn@latest add call — the full command is at the top of this page. The CLI resolves shared dependencies once, so it is faster than adding them one at a time.

Does npx shadcn@latest add overwrite my existing components?

It prompts before overwriting a file that already exists. Pass --overwrite to skip the prompt and replace them, or answer no to keep your version.

Which components need extra dependencies?

Calendar pulls in react-day-picker, Carousel pulls in Embla, Drawer pulls in Vaul, Chart pulls in Recharts, Command pulls in cmdk, Form pulls in React Hook Form and Zod, and Data Table expects TanStack Table. The CLI installs each of these for you.

Are these for Base UI or Radix?

Both. shadcn ships both primitives and every component page here documents the API for each, flagging the places they differ. Base UI vs Radix explains how to choose.