Next.js

A comprehensive guide on installing and configuring shadcn/ui components specifically for Next.js projects.

Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use shadcn@2.3.0.

Step 1: Initialize or Configure Your Next.js Project

Execute the init command provided by the shadcn/ui CLI. This command can be used to either create a new Next.js project with shadcn/ui pre-configured or to set up an existing Next.js project for using shadcn/ui components.

npx shadcn@latest init

During the initialization process, you will be prompted to specify whether you are setting up a standard Next.js project or a project within a Monorepo structure. Select the option that corresponds to your project setup.

Step 2: Integrate Individual Components

You have now completed the initial setup and are ready to begin adding individual shadcn/ui components to your Next.js project as needed.

npx shadcn@latest add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your React files within the Next.js project as demonstrated below:


export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Figma Vite