Components

The Components library has more than 500 shadcn/ui component variants, from buttons, inputs and selects to data tables, calendars and charts. Almost all of them are free.

Browse and preview

  • Components are grouped into Base, Form, Data Display, Navigation and Feedback.
  • Each component page, for example Accordion, shows every variant with a live preview and an article that explains the anatomy, usage, accessibility and common questions.
  • Previews follow your light or dark theme.

Add a component to your project

  1. Click Get the Code on a variant.
  2. Run the install command, for example npx shadcn@latest add @shadcnuikit/accordion1, or copy the source file.
  3. Import it like any other component in your project.

Set up the registry once as described in shadcn CLI. Free variants install without an API key.

Radix UI and Base UI

shadcn/ui can be built on Radix UI or Base UI primitives. The component variants are written to work with both, so they fit the primitive library your project already uses.

Customizing

The code lives in your project. Change classes, props and markup freely. Colors come from your theme variables, so a new theme from the Theme Generator updates every component at once.

MCP ServerBlocks