shadcn/ui Components
A complete directory of shadcn components — each guide covers variants, accessibility, and copy-paste code for React and Next.js. Start with a component below, then customize its look in the theme editor.
What Are shadcn/ui Components?
Ready-made pieces of a website — buttons, tabs, charts — that you copy into your own project and change however you like.
You copy it, you own it
The code goes straight into your project. Nothing to install, and nothing that changes behind your back later.
See it working first
Every guide has live previews, so you can click a component and watch it behave before you copy anything.
Many versions of each one
Not one checkbox but twelve. Eleven chart types. Ten date pickers. Pick whichever fits your page.
Keyboards and screen readers work
Arrow keys, focus, and screen reader labels are already handled. You don’t have to build any of it.
One command to add one
Most components drop in with a single command. A few, like the date picker, take two.
Set your colours once
Change a few colours and every component follows — buttons, charts, and the rest of the page.
Adding a Component Takes One Command
Run this in your project folder and the files appear, ready to use.
# Add a single component to your projectnpx shadcn@latest add button # Or add several at oncenpx shadcn@latest add card tabs tooltipSee Them All on a Finished Page
Our templates come with these pieces already put together, so you start from a real page instead of a blank one.
Frequently Asked Questions
Comparing libraries first? Read our best React UI libraries guide. Want to restyle everything at once? Start with shadcn theming.