Installation Guide
Get shadcn/ui running with your favorite framework. Setup guides for Next.js, Vite, Remix, Laravel, Astro, and more React frameworks.
Getting shadcn/ui up and running
Setting up a new component library usually means wrestling with config files, fighting peer dependencies, and praying everything works together. Not with shadcn/ui.
Choose your framework
Every framework has its quirks. We've documented the exact steps for each one, so you don't have to figure out the gotchas yourself.
Framework | Best For | Production Ready |
---|---|---|
Next.js | Production apps, full-stack projects | Yes, used by Vercel |
Vite | SPAs, dashboards, fast prototyping | Yes, battle-tested |
Remix | Data-heavy apps, forms, nested routing | Yes, growing adoption |
React Router | Modern React apps with built-in bundling | Yes, v7 is stable |
TanStack Start | File-based routing, modern Next.js alternative | Yes, production ready |
Gatsby | Static sites, blogs, marketing pages | Yes, mature SSG |
Astro | Content sites, blogs, minimal JS | Yes, great performance |
Laravel | Existing PHP backends, hybrid apps | Yes, mature ecosystem |
Manual | Custom setups, existing projects | Depends on your setup |
The 30-second quickstart
If you're using Next.js and just want to get moving:
npx shadcn@latest init
npx shadcn@latest add button
Boom. You've got a Button component ready to customize. The CLI does the heavy lifting—you just pick your framework and start building. No complex build processes, no theme providers to wire up, no mysterious webpack errors. Just clean component code that drops right into your project.
What makes shadcn/ui different
Unlike traditional component libraries, shadcn/ui doesn't live in node_modules
. When you run the CLI, it copies actual component code into your project.
// This is YOUR code, in YOUR project
import { Button } from "@/components/ui/button";
Want to see how the Button works? Open the file. Need to add a feature? Edit the code. Having a weird bug? Debug it like any other component in your app.
No more digging through node_modules, no more fighting with library APIs, no more "sorry, that's not supported." The code is yours.
Common questions before starting
After installation
Once you've followed your framework's guide, you'll want to:
- Browse official components for forms, tables, and UI elements
- Add charts for data visualization
- Explore community components for extended functionality
- Add useful hooks to enhance your components
- Use pre-built blocks to quickly build common layouts
Ready to start?
Pick your framework from the cards above and follow the step-by-step guide. Each framework page is optimized for that specific setup, with exact commands, common gotchas, and framework-specific tips.
Remember—you're not installing a dependency, you're adding starter code that you fully control. Once you experience building with components you actually own, you'll wonder why we ever did it differently.
AI First React Components
Master shadcn/ui with AI coding tools. Build React and Next.js applications faster using Cursor, v0, and Copilot with copy-paste components that AI assistants understand perfectly.
Install shadcn/ui Astro
How to install shadcn/ui in Astro projects. Add React components with island architecture for optimal performance.