Skip to main content
1
Add Tailwind CSS
2
Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
3
Follow the Tailwind CSS installation instructions to get started.
4
Add dependencies
5
Add the following dependencies to your project:
6
npm install shadcn class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
7
Configure path aliases
8
Configure the path aliases in your tsconfig.json file.
9
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
10
The @ alias is a preference. You can use other aliases if you want.
11
Configure styles
12
Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section.
13
Add a cn helper
14
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
15
Create a components.json file
16
Create a components.json file in the root of your project.
17
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-nova",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
18
That’s it
19
You can now start adding components to your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us