shadcn/Getting Started

Installation

Install and configure shadcn/ui for various frameworks.

installationsetupframeworks

Choose the setup that matches your starting point.

Use shadcn/create

Build your preset visually, preview your choices, and generate a framework-specific setup command.

Available for Next.js, Vite, Laravel, React Router, Astro, and TanStack Start.

Use the CLI

Use the CLI to scaffold a new project directly from the terminal:

npx shadcn@latest init -t [framework]

Supported templates: next, vite, start, react-router, and astro.

For Laravel, create the app first with laravel new, then run npx shadcn@latest init.

Existing Project

Each framework guide includes an Existing Project section with the manual setup steps for that framework.

Next.js

Use shadcn/create

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

npx shadcn@latest init --preset [CODE] --template next

Use the CLI

Create Project

npx shadcn@latest init -t next

For a monorepo project, use --monorepo flag:

npx shadcn@latest init -t next --monorepo

Existing Project

Create Project

npx create-next-app@latest

Choose the recommended defaults so Tailwind CSS, the App Router, and the default @/* import alias are configured for you.

If you prefer a src/ directory, use --src-dir or choose Yes when prompted:

npx create-next-app@latest --src-dir

Configure Tailwind CSS and Import Aliases

Make sure your tsconfig.json includes the @/* import alias:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Run the CLI

npx shadcn@latest init

Vite

Use shadcn/create

Open shadcn/create and build your preset visually.

npx shadcn@latest init --preset [CODE] --template vite

Use the CLI

Create Project

npx shadcn@latest init -t vite

For a monorepo project, use --monorepo flag:

npx shadcn@latest init -t vite --monorepo

Existing Project

Create Project

npm create vite@latest

Add Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Replace everything in src/index.css with:

@import "tailwindcss";

Edit tsconfig.json file

Add the baseUrl and paths properties to the compilerOptions section:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Update vite.config.ts

npm install -D @types/node

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Run the CLI

npx shadcn@latest init

Astro

Use shadcn/create

Open shadcn/create and build your preset visually.

npx shadcn@latest init --preset [CODE] --template astro

Use the CLI

npx shadcn@latest init -t astro

For a monorepo project, use --monorepo flag:

npx shadcn@latest init -t astro --monorepo

Existing Project

Create Project

npm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git

Edit tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Run the CLI

npx shadcn@latest init

TanStack Start

Use shadcn/create

Open shadcn/create and build your preset visually.

npx shadcn@latest init --preset [CODE] --template start

Use the CLI

npx shadcn@latest init -t start

For a monorepo project, use --monorepo flag:

npx shadcn@latest init -t start --monorepo

Existing Project

Create Project

npx @tanstack/cli@latest create

Choose TanStack Start, the React framework, and the recommended defaults so Tailwind CSS and the @/* import alias are configured for you.

Run the CLI

npx shadcn@latest init

Remix

Create Project

npx create-remix@latest my-app

Run the CLI

npx shadcn@latest init

Laravel

The shadcn CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit.

Create Project

laravel new my-app

Choose the React starter kit. Then move into your project directory:

cd my-app

Use shadcn/create

Open shadcn/create and build your preset visually.

npx shadcn@latest init --preset [CODE] --template laravel

Use the CLI

npx shadcn@latest init

React Router

Use shadcn/create

Open shadcn/create and build your preset visually.

npx shadcn@latest init --preset [CODE] --template react-router

Use the CLI

npx shadcn@latest init -t react-router

For a monorepo project, use --monorepo flag:

npx shadcn@latest init -t react-router --monorepo

Existing Project

Create Project

npm create react-router@latest

Run the CLI

npx shadcn@latest init

Manual Installation

Add Tailwind CSS

Components are styled using Tailwind CSS.

Add dependencies

npm install shadcn class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Configure path aliases

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Configure styles

Add the following to your styles/globals.css file:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Add a cn helper

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Create components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-nova",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "iconLibrary": "lucide"
}