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:

Prompt you to choose a framework (Next.js, Vite, or TanStack Start)
Create a new project with shadcn/ui pre-configured
Install all dependencies
Set up your design system

Manual Installation

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

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

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"
}

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:

string

The template to use (next, vite, start, next-monorepo)

string

The base color to use (neutral, gray, zinc, stone, slate)

boolean

default:"true"

Skip confirmation prompts

boolean

default:"false"

Use default configuration

boolean

default:"false"

Force overwrite of existing configuration

string

The working directory (defaults to current directory)

boolean

Use the src directory when creating a new project

boolean

default:"true"

Use CSS variables for theming

boolean

default:"false"

Enable RTL (right-to-left) support

Example Usage

npx shadcn@latest init

npx shadcn@latest init --template next --base-color zinc --defaults

npx shadcn@latest create my-app

npx shadcn@latest init --rtl

What Gets Installed?

When you run init, the CLI will:

Install dependencies - Installs Tailwind CSS and other required packages
Create components.json - Configuration file for your project
Set up globals.css - Adds CSS variables and base styles
Configure tailwind.config.js - Updates Tailwind configuration
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:

Browse components to see what’s available
Add your first component using the CLI
Configure components.json to customize your setup
Learn about theming to customize colors and styles

Get Started

Installation

Customization

Guides

Integrations

Installation

Installation

Quick Start

Manual Installation

Framework-Specific Guides

Next.js

Vite

Remix

Astro

Laravel

Gatsby

Using Default Options

Installation Options

Example Usage

What Gets Installed?

Next Steps

​Installation

​Quick Start

​Manual Installation

​Framework-Specific Guides

Next.js

Vite

Remix

Astro

Laravel

Gatsby

​Using Default Options

​Installation Options

​Example Usage

​What Gets Installed?

​Next Steps

Installation

Quick Start

Manual Installation

Framework-Specific Guides

Using Default Options

Installation Options

Example Usage

What Gets Installed?

Next Steps