shadcn/ui
Copy-paste components built on Radix + Tailwind. The default UI choice for vibe coders.
In plain English
Like IKEA furniture for your website. Instead of building a table from raw wood, you pick a design, bring it home, and assemble it. You can still paint it whatever color you want.
Real-world example
Say you're building a personal finance app. Instead of spending 3 days designing a settings page from scratch, you grab a pre-made sidebar, form inputs, and toggle switches — and your app looks like it was designed by a professional in 20 minutes.
Where this fits in your project
This is your UI layer — the part users see and interact with. Use it after you know what you're building.
When to use this
When you need a professional-looking UI fast. Instead of designing buttons, forms, and modals from scratch, copy-paste pre-built components and customize them.
The situation
You have a working app but it looks ugly. Or you're starting a new project and want it to look polished from day one.
Good for
- + Landing pages
- + Dashboards
- + SaaS apps
- + Any React/Next.js project
Not ideal for
- - Mobile apps
- - Non-React projects
- - Highly custom designs that don't fit component patterns
Getting started
Run `npx shadcn@latest init` in your project, then `npx shadcn@latest add button` to add your first component.