---
title: "Installing shadcn/ui"
description: "Add shadcn/ui to your existing Next.js project and configure it properly with TypeScript, Tailwind CSS, and all necessary dependencies."
canonical_url: "https://vercel.com/academy/shadcn-ui/installing-shadcn-ui"
md_url: "https://vercel.com/academy/shadcn-ui/installing-shadcn-ui.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T13:00:39.962Z"
content_type: "lesson"
course: "shadcn-ui"
course_title: "React UI with shadcn/ui + Radix + Tailwind"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Installing shadcn/ui

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](https://nextjs.org/docs/app/getting-started/installation): A working Next.js project with TypeScript support
- [Tailwind CSS](https://tailwindcss.com/docs/installation): Already configured in your project
- [Node.js](https://nodejs.org/en/download/): Version 18 or higher
- A package manager installed. We recommend [pnpm](https://pnpm.io/).

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:

```bash
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:

```bash
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](https://ui.shadcn.com/colors). 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:

```json title="components.json"
{
  "$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:

```tsx title="lib/utils.ts"
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.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)