Now that you understand the theory behind shadcn/ui and Radix primitives, it's time to get hands-on. We'll add shadcn/ui to an existing Next.js project and configure it properly for development. This setup will serve as the foundation for all the practical work we'll do throughout the rest of the course.

Prerequisites

Before we begin, make sure you have:

• Next.js project: A working Next.js project with TypeScript support
• Tailwind CSS: Already configured in your project
• Node.js: Version 18 or higher
• A package manager installed. We recommend pnpm.

If you don't have a Next.js project with Tailwind set up yet, you can use the following command to create a new one:

npx create-next-app@latest --typescript --tailwind

Initializing shadcn/ui

Let's initialize shadcn/ui in your project. Run the following command in your project directory:

npx shadcn@latest init

The CLI will ask you what color you want to use as the base color. You can see the available colors here. We'll use Neutral for this example.

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating CSS variables in app/globals.css
✔ Installing dependencies.
✔ Created 1 file:
  - lib/utils.ts

Success! Project initialization completed.
You may now add components.

Exploring the created files

Let's explore the files that were created by the CLI.

components.json

The CLI will create a components.json file in your project root directory, which should look like this:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

This file is used to configure the shadcn/ui CLI.

app/globals.css

The CLI will create or modify a app/globals.css file in your project root directory, containing the base styles for your project. We'll explore this file in more detail in a future lesson. This file does the following:

• Sets the light / dark mode colors and variables
• Connects these to a theme so they can be referenced
• Adds some base styles to the body element

lib/utils.ts

The CLI will create a lib/utils.ts file in your project root directory, which should look like this:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

This file is used to merge Tailwind classes and other classes into a single class name.

Wrapping up

Congratulations! You now have shadcn/ui properly installed and configured (yes, that's really all you need to do). In our next lesson, we'll add your first component and learn how to use it in your project.