Skip to main content

​
Installation

Install and configure shadcn/ui in your project.
You can use the CLI to automatically install and configure components. The init command will guide you through the setup process.

​
Quick Start

The fastest way to get started is to use the create command: 
npx shadcn@latest create
This will:
  1. Prompt you to choose a framework (Next.js, Vite, or TanStack Start)
  2. Create a new project with shadcn/ui pre-configured
  3. Install all dependencies
  4. Set up your design system

​
Manual Installation

If you have an existing project, you can add shadcn/ui components using the init command:
1

Run the init command

Run the shadcn init command to setup your project:
npx shadcn@latest init
This will:
  • Detect your framework
  • Prompt you to configure components.json
  • Install dependencies
  • Set up Tailwind CSS
  • Configure import aliases
2

Configure components.json

You’ll be asked a few questions to configure your project:
Would you like to use TypeScript (recommended)? › yes
Which style would you like to use? › New York
Which color would you like to use as base color? › Neutral
Where is your global CSS file? › app/globals.css
Would you like to use CSS variables for theming? › yes
Are you using a custom tailwind prefix? › 
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › yes
This creates a components.json file in your project root:
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
3

Add components

You can now start adding components to your project:
npx shadcn@latest add button
The component will be added to your project in the location specified in your components.json file.

​
Framework-Specific Guides

We provide detailed installation guides for popular frameworks:

Next.js

Install shadcn/ui in a Next.js project (App Router or Pages Router)

Vite

Install shadcn/ui in a Vite React project

Remix

Install shadcn/ui in a Remix project

Astro

Install shadcn/ui in an Astro project

Laravel

Install shadcn/ui with Laravel and Inertia

Gatsby

Install shadcn/ui in a Gatsby project

​
Using Default Options

You can use the --defaults flag to skip the configuration prompts and use sensible defaults: 
npx shadcn@latest init --defaults
This will:
  • Use TypeScript
  • Use the “New York” style
  • Use “neutral” as the base color
  • Use CSS variables for theming
  • Set up standard import aliases

​
Installation Options

The init command supports several options:
​
--template
string
The template to use (next, vite, start, next-monorepo)
​
--base-color
string
The base color to use (neutral, gray, zinc, stone, slate)
​
--yes
boolean
default:"true"
Skip confirmation prompts
​
--defaults
boolean
default:"false"
Use default configuration
​
--force
boolean
default:"false"
Force overwrite of existing configuration
​
--cwd
string
The working directory (defaults to current directory)
​
--src-dir
boolean
Use the src directory when creating a new project
​
--css-variables
boolean
default:"true"
Use CSS variables for theming
​
--rtl
boolean
default:"false"
Enable RTL (right-to-left) support

​
Example Usage

npx shadcn@latest init

​
What Gets Installed?

When you run init, the CLI will:
  1. Install dependencies - Installs Tailwind CSS and other required packages
  2. Create components.json - Configuration file for your project
  3. Set up globals.css - Adds CSS variables and base styles
  4. Configure tailwind.config.js - Updates Tailwind configuration
  5. Create utils file - Adds the cn() utility function
The init command will modify your tailwind.config.js and CSS files. Make sure to commit your changes before running the command.

​
Next Steps

After installation:
  1. Browse components to see what’s available
  2. Add your first component using the CLI
  3. Configure components.json to customize your setup
  4. Learn about theming to customize colors and styles

Build docs developers (and LLMs) love

Get started for freeTalk to us