Manual Installation
Add dependencies to 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
Integrate the following dependencies into your project:
npm install class-variance-authority motion clsx tailwind-merge lucide-react tw-animate-css Set up path aliases
Set up the path aliases in your tsconfig.json file.
tsconfig.json{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}Set up styles v4 recommended
src/styles/globals.css@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark \*));
:root {
--radius: 0.625rem;
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 3.9216%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9216%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9216%);
--primary: hsl(0 0% 9.0196%);
--primary-foreground: hsl(0 0% 98.0392%);
--secondary: hsl(0 0% 96.0784%);
--secondary-foreground: hsl(0 0% 9.0196%);
--muted: hsl(0 0% 96.0784%);
--muted-foreground: hsl(0 0% 45.0980%);
--accent: hsl(0 0% 96.0784%);
--accent-foreground: hsl(0 0% 9.0196%);
--destructive: hsl(357.1429 100% 45.2941%);
--destructive-foreground: hsl(0 0% 98.0392%);
--border: hsl(0 0% 89.8039%);
--input: hsl(0 0% 89.8039%);
--ring: hsl(0 0% 63.1373%);
--chart-1: hsl(17.8776 100% 48.0392%);
--chart-2: hsl(174.8000 100% 29.4118%);
--chart-3: hsl(195.7143 72.4138% 22.7451%);
--chart-4: hsl(43.5294 100% 50%);
--chart-5: hsl(36.3780 100% 49.8039%);
--sidebar: hsl(0 0% 98.0392%);
--sidebar-foreground: hsl(0 0% 3.9216%);
--sidebar-primary: hsl(0 0% 9.0196%);
--sidebar-primary-foreground: hsl(0 0% 98.0392%);
--sidebar-accent: hsl(0 0% 96.0784%);
--sidebar-accent-foreground: hsl(0 0% 9.0196%);
--sidebar-border: hsl(0 0% 89.8039%);
--sidebar-ring: hsl(0 0% 63.1373%);
}
.dark {
--background: hsl(0 0% 3.9216%);
--foreground: hsl(0 0% 98.0392%);
--card: hsl(0 0% 3.9216%);
--card-foreground: hsl(0 0% 98.0392%);
--popover: hsl(0 0% 3.9216%);
--popover-foreground: hsl(0 0% 98.0392%);
--primary: hsl(0 0% 98.0392%);
--primary-foreground: hsl(0 0% 9.0196%);
--secondary: hsl(0 0% 14.9020%);
--secondary-foreground: hsl(0 0% 98.0392%);
--muted: hsl(0 0% 14.9020%);
--muted-foreground: hsl(0 0% 63.1373%);
--accent: hsl(0 0% 14.9020%);
--accent-foreground: hsl(0 0% 98.0392%);
--destructive: hsl(358.8679 68.8312% 30.1961%);
--destructive-foreground: hsl(0 0% 98.0392%);
--border: hsl(0 0% 14.9020%);
--input: hsl(0 0% 14.9020%);
--ring: hsl(0 0% 45.0980%);
--chart-1: hsl(225.4286 84.0000% 49.0196%);
--chart-2: hsl(159.8936 100% 36.8627%);
--chart-3: hsl(36.3780 100% 49.8039%);
--chart-4: hsl(273.4054 100.0000% 63.7255%);
--chart-5: hsl(345.4709 100% 56.2745%);
--sidebar: hsl(0 0% 9.0196%);
--sidebar-foreground: hsl(0 0% 98.0392%);
--sidebar-primary: hsl(225.4286 84.0000% 49.0196%);
--sidebar-primary-foreground: hsl(0 0% 98.0392%);
--sidebar-accent: hsl(0 0% 14.9020%);
--sidebar-accent-foreground: hsl(0 0% 98.0392%);
--sidebar-border: hsl(0 0% 14.9020%);
--sidebar-ring: hsl(0 0% 32.1569%);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
@layer base {
- {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
@utility lustre-text {
@apply inline-block font-extrabold text-transparent bg-clip-text bg-size-[200%_auto] bg-position-[0%_center];
}
@utility lustre-light {
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.3) 30%,
rgba(0, 0, 0, 0.7) 45%,
#ffffff 50%,
rgba(0, 0, 0, 0.7) 55%,
rgba(0, 0, 0, 0.3) 70%,
rgba(0, 0, 0, 0.05) 100%
);
}
@utility lustre-dark {
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.15) 30%,
rgba(255, 255, 255, 0.4) 45%,
#ffffff 50%,
rgba(255, 255, 255, 0.4) 55%,
rgba(255, 255, 255, 0.15) 70%,
rgba(255, 255, 255, 0.05) 100%
)
}
Add util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Create a components.json file
Create a components.json in the root of your project.
components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"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"
}Done, All set.
You can now begin embedding components into your project.