How to Setup Shadcn UI in Next.js 14 Quick and Easy Guide

This article will explain the integration of Shadcn-UI with your Next.js 14 Project. Integrating ShadCN-UI with Next.js can streamline your development process, offering a blend of flexibility and power. This guide will walk you through the steps to set up, configure, and optimize your Next.js project with ShadCN-UI, ensuring a smooth workflow and a clean codebase. Here is the GitHub Link of ShadCN-UI.

What is Shadcn UI ?

Shadcn UI is a collection of beautifully designed, reusable components that you can copy and paste into your applications. Unlike typical component libraries, Shadcn UI is not installed as a dependency. Instead, you copy the components’ code directly into your project. This is Ideal for building your own component library or enhancing your existing projects with well-designed UI elements.

Integrate Shadcn UI with Next.js 14?

Now let’s create a new project of Next.js 14. For this first of all create a new Next.js 14 project using npx in the terminal like this.

npx create-next-app@latest shadcn-ui-test01 --typescript --tailwind --eslint
Code language: CSS (css)

I enabled typescript and eslint but you can neglect this if you prefer JavaScript over TypeScript, and no eslint for avoiding extra hustle and best practices while learning to code. Just like any other Next.js project this will also ask you some questions which you have to answer for the project setup. for example,

 Would you like to use `src/` directory? » No / Yes
 Would you like to use App Router? (recommended) » No / YesCode language: JavaScript (javascript)

I just answered Yes to this and my project start creating as you can see in the image below.

Run the Shadcn UI Initialization Command:

Navigate to your project directory and run the Shadcn UI initialization command:

npx shadcn-ui@latest initCode language: CSS (css)

You also have to answer some questions while initialization process which are as follows

• √ Which style would you like to use? » Default
• √ Which color would you like to use as base color? » Slate
• √ Would you like to use CSS variables for colors? » Yes

Configure components.json:

During the initialization, you’ll be prompted to configure components.json. You can choose the default style, base color, and whether to use CSS variables for colors.

Install Required Dependencies:

Shadcn UI components are styled using Tailwind CSS. Ensure you have Tailwind CSS installed in your project. Follow the Tailwind CSS installation instructions if needed.

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
Code language: JavaScript (javascript)

Add Icon Library:

Depending on the style you choose, you may need to install an icon library. For example:

<code>npm install lucide-react</code>Code language: HTML, XML (xml)

Add Components

You can now start adding Shadcn UI components to your project. For example, to add a button component:

npx shadcn-ui@latest add button
Code language: CSS (css)

You will notice that a button.tsx file has been added to your components/ui folder. You can now Import and use the component in your project just like the following code example.

import { Button } from "@/components/ui/button";


export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      
      <div>
      <h1 className="text-6xl font-bold text-primary">Next.js 14 + ShadCN UI Example</h1>
      <Button>I am Working !! </Button>
    </div>
  </main>
  );
}


Code language: JavaScript (javascript)

And finnaly it is working ShadCN UI example with Next.js 14.