Join our Discord Community

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.

FrameworkBest ForProduction Ready
Next.jsProduction apps, full-stack projectsYes, used by Vercel
ViteSPAs, dashboards, fast prototypingYes, battle-tested
RemixData-heavy apps, forms, nested routingYes, growing adoption
React RouterModern React apps with built-in bundlingYes, v7 is stable
TanStack StartFile-based routing, modern Next.js alternativeYes, production ready
GatsbyStatic sites, blogs, marketing pagesYes, mature SSG
AstroContent sites, blogs, minimal JSYes, great performance
LaravelExisting PHP backends, hybrid appsYes, mature ecosystem
ManualCustom setups, existing projectsDepends 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:

  1. Browse official components for forms, tables, and UI elements
  2. Add charts for data visualization
  3. Explore community components for extended functionality
  4. Add useful hooks to enhance your components
  5. 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.