Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

Next.js

Install shadcn.io in a Next.js project.

Use the shadcn.io preset

Initialize a Next.js project with the shadcn.io registry preset.

Use the CLI

Scaffold a new Next.js project directly from the terminal.

Existing Project

Configure shadcn.io manually in an existing Next.js project.

Use the shadcn.io Preset

Create Project

Run the init command with the shadcn.io preset and the Next.js template:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t next

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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>
  );
}

Use the CLI

Create Project

Run the init command to scaffold a new Next.js project and configure shadcn.io:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t next

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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>
  );
}

Existing Project

Create Project

If you need a new Next.js project, create one with create-next-app. Otherwise, skip this step.

bunx --bun 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:

bunx --bun create-next-app@latest --src-dir

With --src-dir, Next.js places your app in src/app and configures the @/* alias to point to ./src/*.

Configure Tailwind CSS and Import Aliases

If you created your project with the recommended create-next-app defaults, you can skip this step.

If you're adding shadcn.io to an older or custom Next.js app, make sure Tailwind CSS is installed first. You can follow the official Next.js installation guide.

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

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

If you used --src-dir, point the alias to ./src/* instead.

Run the CLI

Run the shadcn init command with the shadcn.io preset to set up your project.

bunx --bun shadcn@latest init https://kit.dev/r/style.json

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

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>
  );
}

If you used --src-dir, add the component to src/app/page.tsx instead.