Next.js

Install shadcn/ui in Next.js with the official CLI. App Router, then add a component from the shadcn.io registry. TypeScript and Tailwind CSS.

init -t next scaffolds the app. init alone configures an app you already created. Then add a file from the shadcn.io registry — official CLI, our URL.

Use the CLI

Scaffold Next.js from the terminal

Existing project

Add shadcn to an app you have

Use the CLI

Create the project

Follow the prompts: base, preset, monorepo.

npx shadcn@latest init -t next

Monorepo:

npx shadcn@latest init -t next --monorepo

Add a component

Official registry:

npx shadcn@latest add card

shadcn.io registry — same CLI, our URL:

npx shadcn@latest add https://www.shadcn.io/r/card.json

Monorepo: run from apps/web, or -c apps/web from the repo root.

Import it

app/page.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your Next.js app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

Monorepo: edit apps/web/app/page.tsx and import from @workspace/ui/components/card.

Existing project

Create the app if you need one

Skip this if the repo already exists.

npx create-next-app@latest

Take the defaults so Tailwind, App Router, and @/* are set. src/ directory:

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

That puts the app in src/app and points @/* at ./src/*.

Alias

Skip if create-next-app already wrote this.

tsconfig.json

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

With --src-dir, use "./src/*".

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

app/page.tsx

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}