Installation: Next.js

Core Idea

Three ways to get shadcn/ui into a Next.js project: visually via shadcn/create preset builder, directly scaffolded via the CLI, or manually wired into an existing project.

Key Concepts

• shadcn/create: visual preset builder at /create?template=next; generates npx shadcn@latest init --preset [CODE] --template next.
• init -t next: CLI-only scaffold with interactive prompts (base, preset, monorepo).
• --monorepo: flag for monorepo scaffolding; then run add with -c apps/web to target the workspace.
• Existing project path: requires create-next-app (or manual Tailwind setup) plus a @/* alias in tsconfig.json before running plain npx shadcn@latest init.
• --src-dir: places app in src/app and points @/* to ./src/*.

Code Examples

# Preset or CLI scaffold
npx shadcn@latest init --preset [CODE] --template next
npx shadcn@latest init -t next
npx shadcn@latest init -t next --monorepo

# Existing project
npx create-next-app@latest --src-dir
npx shadcn@latest init

# Add + use a component
npx shadcn@latest add card
npx shadcn@latest add card -c apps/web   # monorepo

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

• O que demonstra: import padrão pós-add no App Router.

Reference Tables

Path	tsconfig alias	Import example
Recommended create-next-app defaults	@/* → ./*	@/components/ui/card
--src-dir	@/* → ./src/*	src/app/page.tsx imports same alias
Monorepo	workspace-scoped	@workspace/ui/components/card

Anti-patterns

• Running init without Tailwind/@/* alias configured: for manual/older projects, set up Tailwind and the tsconfig.json paths alias first.

Key Takeaways

1. Monorepo installs need -c apps/web (or run from that dir) on every add, and import from @workspace/ui/components/* instead of @/components/ui/*.
2. The three entry points converge on the same underlying init/add CLI commands.
3. --src-dir changes both the file location and the tsconfig alias target, keep them in sync.

Connects To

• cli: init/add command reference.
• components-json: what init actually writes.
• installation-manual: for full manual setup without any scaffold command.