My Setup Using Next.js and ShadCN UI

First of all, I would like to thank Allah SWT and Prophet Muhammad (peace be upon him) for the health and blessings that enabled me to write this article.

Pre-requisites

• Bun or npm: Make sure you have one of these package managers installed.
• VS Code: A powerful code editor recommended for development.

Getting Started

First, open the folder where your project is located. In this example, I'm using the path:
C:\Users\USER\Documents\Project

Next, right-click inside the folder and select "Open Command Prompt" (or "Open in Terminal").
Then, type the following command to open VS Code:

1code .

or like this

Open Terminal in VS Code

Once you are inside VS Code, press the following keys simultaneously to open the terminal: CTRL+SHIFT+`

After the terminal opens, you can create a new Next.js project by running one of the following commands:

For npm:

1npx create-next-app@latest

For bun:

1bunx create-next-app@latest

Configuration

After running the command, you will be prompted with several questions. Follow these recommended answers:

The setup will generate a new Next.js project with your chosen configurations.

Navigate to Your Project folder

After the setup is complete, go to your Next.js project folder by typing the following command:

1cd example-name

Alternatively, you can open your project folder directly in VS Code by pressing the following keys simultaneously: CTRL+K+O

Then, select your project folder from the file explorer. This will open your Next.js project in VS Code.

Install ShadCN

After navigating to your project folder, open the terminal in your project directory. You can do this by pressing: CTRL+SHIFT+`

then, type the following command to instal shadcn:

1bunx --bun shadcn@latest init

After running the command, you will be prompted with several questions.

Install Components

You can now start adding components to your project.

1bunx --bun shadcn@latest add button

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

1import { Button } from '@/components/ui/button';
2
3export default function Home() {
4  return (
5    <div>
6      <Button>Click me</Button>
7    </div>
8  );
9}

Conclusion

By following this guide, you have successfully set up a Next.js project with ShadCN UI. You can now build your applications faster and more efficiently with ShadCN's customizable components. Happy coding!