Next.js

Build Your Preset

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

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset [CODE] --template next
Copy

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add card
Copy

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add card -c apps/web
Copy

The command above will add the Card component to your project. You can then import it like this:

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

If you created a monorepo, update apps/web/app/page.tsx and import from @workspace/ui/components/card instead.

Create Project

Run the init command to scaffold a new Next.js project. Follow the prompts to configure your project: base, preset, monorepo, and more.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init -t next
Copy

For a monorepo project, use --monorepo flag:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init -t next --monorepo
Copy

Add Components

Add the Card component to your project:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add card
Copy

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add card -c apps/web
Copy

The command above will add the Card component to your project. You can then import it like this:

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

If you created a monorepo, update apps/web/app/page.tsx and import from @workspace/ui/components/card instead.

Create Project

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

pnpmnpmyarnbun
pnpm create next-app@latest
Copy

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:

pnpmnpmyarnbun
pnpm create next-app@latest --src-dir
Copy

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 StyleDriven UI 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:

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

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

Run the CLI

Run the sd-ui init command to set up StyleDriven UI in your project.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

Add Components

You can now start adding components to your project.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button
Copy

The command above will add the Button component to your project. You can then import it like this:

Copyimport { 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.