Shadcn Installation Guide
Setup guides for shadcn/ui with Next.js, Vite, Remix, Laravel, Astro, and more React frameworks. Get started with TypeScript components quickly.
Installation not working?
Join our Discord community for help from other developers.
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.
Why AI Coding Tools Love Shadcn UI
Why shadcn UI works perfectly with AI coding tools like Cursor, Copilot, and v0. Copy-paste React components with TypeScript for Next.js applications.
Install shadcn/ui Astro
Install shadcn/ui in Astro projects with React components and island architecture. Step-by-step guide for TypeScript and Tailwind CSS setup.