shadcn init

The init command initializes your project and installs dependencies. It creates a components.json file and sets up your project for shadcn/ui.

Usage

shadcn init [components...]

Arguments

components

string[]

Names, URL, or local path to components to install during initialization.

Options

--template

string

The template to use. Available options:

next - Next.js
start - TanStack Start
vite - Vite
next-monorepo - Next.js Monorepo

--base-color

string

The base color to use. Available options:

neutral
gray
zinc
stone
slate

--yes

boolean

default:"true"

Skip confirmation prompt.

--defaults

boolean

default:"false"

Use default configuration.

--force

boolean

default:"false"

Force overwrite of existing configuration.

--cwd

string

The working directory. Defaults to the current directory.

--silent

boolean

default:"false"

Mute output.

--src-dir

boolean

default:"false"

Use the src directory when creating a new project.

--no-src-dir

boolean

Do not use the src directory when creating a new project.

--css-variables

boolean

default:"true"

Use CSS variables for theming.

--no-css-variables

boolean

Do not use CSS variables for theming.

--no-base-style

boolean

Do not install the base shadcn style.

--rtl

boolean

default:"false"

Enable RTL (right-to-left) support.

Examples

Basic initialization

shadcn init

This will prompt you to configure your project interactively.

Initialize with defaults

shadcn init --defaults

Uses default configuration (Next.js template with neutral base color).

Initialize with specific template and color

shadcn init --template vite --base-color zinc

Initialize with components

shadcn init button card

Initializes the project and installs the button and card components.

Initialize with RTL support

shadcn init --rtl

Initialize in a specific directory

shadcn init --cwd ./my-project

Output

The command creates a components.json file in your project root with your configuration:

{
  "$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
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

What it does

Detects your project framework and configuration
Prompts for configuration options (style, base color, paths, etc.)
Creates components.json with your preferences
Installs the base style (if not disabled)
Installs any specified components
Updates Tailwind configuration if needed

Commands

Usage

Arguments

Options

Examples

Basic initialization

Initialize with defaults

Initialize with specific template and color

Initialize with components

Initialize with RTL support

Initialize in a specific directory

Output

What it does

Build docs developers (and LLMs) love

Commands

​Usage

​Arguments

​Options

​Examples

​Basic initialization

​Initialize with defaults

​Initialize with specific template and color

​Initialize with components

​Initialize with RTL support

​Initialize in a specific directory

​Output

​What it does

Build docs developers (and LLMs) love

Usage

Arguments

Options

Examples

Basic initialization

Initialize with defaults

Initialize with specific template and color

Initialize with components

Initialize with RTL support

Initialize in a specific directory

Output

What it does