shadcn/ui ships one version of each component. One Button, one Input, one Select. That is on purpose: it is a starting point, not a design system.
But real products need more. A button with a loading spinner. An input with a prefix and a clear button. A select with avatars. A file upload with progress bars. A badge with a status dot. Every time you need one of those, you open the shadcn docs, copy the base component and spend 20 minutes adjusting it.
The Shadcn UI Kit components library collects those variations so you do not have to build them again: 532 component variants across 49 components, and 527 of them are free.
Shadcn UI Kit is an independent project built on shadcn/ui. It is not the official shadcn library.
What "variant" means here
Each variant is a small, focused example built on top of a standard shadcn/ui component. Take the Button page: it has 27 variants of the same Button. All of them use the regular Button from components/ui/button, so nothing changes in your base components.
You get the pattern, not a new dependency.
Built for Radix UI and Base UI
shadcn/ui can now run on two primitive libraries: Radix UI and Base UI. The component variants are written to work with both, so they fit whichever one your project already uses. Everything is styled with Tailwind CSS v4 and the standard shadcn/ui theme variables, so light mode, dark mode and your custom theme apply automatically.
The library at a glance
The 49 components are grouped into five categories:
| Category | Variants | Components |
|---|---|---|
| Base | 168 | Button, Button Group, Badge, Avatar, Alert, Alert Dialog, Accordion, Card, Separator, Skeleton, Tooltip |
| Form | 152 | Input, Select, Combobox, Calendar, Checkbox, Radio Group, Switch, Textarea, Field, File Upload, Native Select, Toggle |
| Data Display | 102 | Tabs, Table, Data Table, Carousel, Item, Command, Collapsible, Bubble, Drawer, Scroll Area, Attachment, Autocomplete |
| Feedback | 66 | Spinner, Slider, Sonner Toast, Progress, Empty State, Popover, Hover Card |
| Navigation | 44 | Dropdown Menu, Pagination, Sheet, Breadcrumb, Navigation Menu, Context Menu, Menubar |
The most useful ones
These are the components with the most variants, and the ones I find myself reaching for in almost every project.
Buttons and actions
- Button (27 variants)
- Button Group (20)
- Badge (17): notification counts and announcement badges
- Avatar (21): avatar groups, status badges, tooltips and dropdowns
Forms
Forms are where most UI time goes, and this is the deepest part of the library:
- Input (25 variants)
- Select (15) and Combobox (12): with avatars, groups, icons, search and multi select
- Calendar (15)
- Radio Group (15) and Checkbox (13)
- File Upload (10): dropzones, multiple files, image previews and chat attachments
- Field, Switch, Textarea, Native Select and Toggle
Data display
- Tabs (15)
- Table (12) and Data Table (6): TanStack Table with sorting, filtering and pagination
- Carousel (13): side thumbnails, autoplay, custom dots and progress bars
- Command (9): command palettes and quick search
- Bubble (7) and Attachment (5): chat messages, reactions and file previews for chat and AI interfaces
Feedback and navigation
- Spinner (14), Progress (10) and Slider (13)
- Sonner Toast (12)
- Empty State (8)
- Dropdown Menu (12) and Pagination (12)
How to use a variant
Every variant has a live preview that follows your light or dark theme. When you find one you like, click Get the Code. You have two options:
1. Copy the source. The file is a normal React component. Paste it into your project and import it.
2. Install with the shadcn CLI. Add the registry to your components.json once:
"registries": {
"@shadcnuikit": {
"url": "https://shadcnuikit.com/r/{name}.json",
"headers": {
"Authorization": "Bearer ${REGISTRY_TOKEN}"
}
}
}
Then install any variant by name:
npx shadcn@latest add @shadcnuikit/accordion1
The CLI adds the variant file and any shadcn/ui base components it needs. Free variants do not need an API key. The install command is available for npm, pnpm, yarn and bun.
Customizing
The code lives in your project, so you can change classes, props and markup however you like. Colors come from your theme variables, which means one change in your theme updates every component at once.
If you want a new look, the Theme Generator lets you build a shadcn/ui theme, preview it on real components and export the Tailwind CSS v4 variables.
More than a demo page
Each component page also includes an article covering anatomy, usage, accessibility and common questions. Useful when you are not sure whether you need a Popover or a Hover Card, a Sheet or a Drawer.
And all variants are available through the kit's MCP server, so Claude Code, Cursor and other AI editors can find and install them for you instead of writing a generic version from scratch.
When you need more than components
Components are the smallest building blocks. If you need complete sections or screens, Shadcn UI Kit also has 540+ blocks (heroes, pricing tables, data tables, charts, AI chat), 16 admin dashboards and website templates. Details are on the pricing page.
Wrapping up
shadcn/ui gives you the foundation. These 532 variants give you the patterns you would otherwise rebuild in every project, and almost all of them are free.
Which component variant is missing? Leave a comment and I will add it to the list.
Top comments (0)