Manual Installation

Add dependencies and configure your project manually.

Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project. Follow the Tailwind CSS installation instructions to get started.

Add dependencies

pnpm add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Configure path aliases

Configure the path aliases in your tsconfig.json file:

1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "@/*": ["./*"]
6    }
7  }
8}

The @ alias is a preference. You can use other aliases if you want.

Configure styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section.

1@import "tailwindcss";
2@import "tw-animate-css";
3 
4@custom-variant dark (&:is(.dark *));
5 
6:root {
7  --background: oklch(1 0 0);
8  --foreground: oklch(0.145 0 0);
9  --card: oklch(1 0 0);
10  --card-foreground: oklch(0.145 0 0);
11  --popover: oklch(1 0 0);
12  --popover-foreground: oklch(0.145 0 0);
13  --primary: oklch(0.205 0 0);
14  --primary-foreground: oklch(0.985 0 0);
15  --secondary: oklch(0.97 0 0);
16  --secondary-foreground: oklch(0.205 0 0);
17  --muted: oklch(0.97 0 0);
18  --muted-foreground: oklch(0.556 0 0);
19  --accent: oklch(0.97 0 0);
20  --accent-foreground: oklch(0.205 0 0);
21  --destructive: oklch(0.577 0.245 27.325);
22  --destructive-foreground: oklch(0.577 0.245 27.325);
23  --border: oklch(0.922 0 0);
24  --input: oklch(0.922 0 0);
25  --ring: oklch(0.708 0 0);
26  --chart-1: oklch(0.646 0.222 41.116);
27  --chart-2: oklch(0.6 0.118 184.704);
28  --chart-3: oklch(0.398 0.07 227.392);
29  --chart-4: oklch(0.828 0.189 84.429);
30  --chart-5: oklch(0.769 0.188 70.08);
31  --radius: 0.625rem;
32  --sidebar: oklch(0.985 0 0);
33  --sidebar-foreground: oklch(0.145 0 0);
34  --sidebar-primary: oklch(0.205 0 0);
35  --sidebar-primary-foreground: oklch(0.985 0 0);
36  --sidebar-accent: oklch(0.97 0 0);
37  --sidebar-accent-foreground: oklch(0.205 0 0);
38  --sidebar-border: oklch(0.922 0 0);
39  --sidebar-ring: oklch(0.708 0 0);
40}
41 
42.dark {
43  --background: oklch(0.145 0 0);
44  --foreground: oklch(0.985 0 0);
45  --card: oklch(0.145 0 0);
46  --card-foreground: oklch(0.985 0 0);
47  --popover: oklch(0.145 0 0);
48  --popover-foreground: oklch(0.985 0 0);
49  --primary: oklch(0.985 0 0);
50  --primary-foreground: oklch(0.205 0 0);
51  --secondary: oklch(0.269 0 0);
52  --secondary-foreground: oklch(0.985 0 0);
53  --muted: oklch(0.269 0 0);
54  --muted-foreground: oklch(0.708 0 0);
55  --accent: oklch(0.269 0 0);
56  --accent-foreground: oklch(0.985 0 0);
57  --destructive: oklch(0.396 0.141 25.723);
58  --destructive-foreground: oklch(0.637 0.237 25.331);
59  --border: oklch(0.269 0 0);
60  --input: oklch(0.269 0 0);
61  --ring: oklch(0.439 0 0);
62  --chart-1: oklch(0.488 0.243 264.376);
63  --chart-2: oklch(0.696 0.17 162.48);
64  --chart-3: oklch(0.769 0.188 70.08);
65  --chart-4: oklch(0.627 0.265 303.9);
66  --chart-5: oklch(0.645 0.246 16.439);
67  --sidebar: oklch(0.205 0 0);
68  --sidebar-foreground: oklch(0.985 0 0);
69  --sidebar-primary: oklch(0.488 0.243 264.376);
70  --sidebar-primary-foreground: oklch(0.985 0 0);
71  --sidebar-accent: oklch(0.269 0 0);
72  --sidebar-accent-foreground: oklch(0.985 0 0);
73  --sidebar-border: oklch(0.269 0 0);
74  --sidebar-ring: oklch(0.439 0 0);
75}
76 
77@theme inline {
78  --color-background: var(--background);
79  --color-foreground: var(--foreground);
80  --color-card: var(--card);
81  --color-card-foreground: var(--card-foreground);
82  --color-popover: var(--popover);
83  --color-popover-foreground: var(--popover-foreground);
84  --color-primary: var(--primary);
85  --color-primary-foreground: var(--primary-foreground);
86  --color-secondary: var(--secondary);
87  --color-secondary-foreground: var(--secondary-foreground);
88  --color-muted: var(--muted);
89  --color-muted-foreground: var(--muted-foreground);
90  --color-accent: var(--accent);
91  --color-accent-foreground: var(--accent-foreground);
92  --color-destructive: var(--destructive);
93  --color-destructive-foreground: var(--destructive-foreground);
94  --color-border: var(--border);
95  --color-input: var(--input);
96  --color-ring: var(--ring);
97  --color-chart-1: var(--chart-1);
98  --color-chart-2: var(--chart-2);
99  --color-chart-3: var(--chart-3);
100  --color-chart-4: var(--chart-4);
101  --color-chart-5: var(--chart-5);
102  --radius-sm: calc(var(--radius) - 4px);
103  --radius-md: calc(var(--radius) - 2px);
104  --radius-lg: var(--radius);
105  --radius-xl: calc(var(--radius) + 4px);
106  --color-sidebar: var(--sidebar);
107  --color-sidebar-foreground: var(--sidebar-foreground);
108  --color-sidebar-primary: var(--sidebar-primary);
109  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110  --color-sidebar-accent: var(--sidebar-accent);
111  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112  --color-sidebar-border: var(--sidebar-border);
113  --color-sidebar-ring: var(--sidebar-ring);
114}
115 
116@layer base {
117  * {
118    @apply border-border outline-ring/50;
119  }
120  body {
121    @apply bg-background text-foreground;
122  }
123}

Add a cn helper

Add a cn helper to lib/utils.ts:

1import { clsx, type ClassValue } from "clsx"
2import { twMerge } from "tailwind-merge"
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs))
6}

Create a components.json file

Create a components.json file in the root of your project:

1{
2  "$schema": "https://ui.shadcn.com/schema.json",
3  "style": "new-york",
4  "rsc": false,
5  "tsx": true,
6  "tailwind": {
7    "config": "",
8    "css": "src/styles/globals.css",
9    "baseColor": "neutral",
10    "cssVariables": true,
11    "prefix": ""
12  },
13  "aliases": {
14    "components": "@/components",
15    "utils": "@/lib/utils",
16    "ui": "@/components/ui",
17    "lib": "@/lib",
18    "hooks": "@/hooks"
19  },
20  "iconLibrary": "lucide"
21}

For more details, see the documentation for each component.