Set Up ShadCN with Next.js

Set Up ShadCN with Next.js

July 25, 2024

ShadCN is a popular collection of re-usable components that can significantly speed up your development process. Here's how to integrate it with your Next.js project:

Prerequisites

  • Node.js installed (version 14.6.0 or newer)
  • A Next.js project set up

Steps

1. Initialize ShadCN in your project

Run the following command in your project directory:

npx shadcn-ui@latest init

2. Configure your project

Answer the prompts:

  • Choose your styling preference (default: CSS Variables)
  • Select your color theme
  • Specify your project's global CSS file location

3. Install components

Use the CLI to add ShadCN components as needed:

npx shadcn-ui@latest add button

4. Use components in your Next.js pages

Import and use the components in your pages or components:

import { Button } from "@/components/ui/button"
export default function Home() {
return (
Click me
)
}

5. Customize components

Modify the installed components in your components/ui directory to fit your needs.

Benefits

  • Consistent design system
  • Highly customizable components
  • Improved development speed
  • Accessibility out of the box

By following these steps, you'll have ShadCN set up in your Next.js project, ready to enhance your development workflow.