The product currently in development phase.

New

Manual Installation

PreviousNext

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

Add the following dependencies to your project:

pnpm add shadcn class-variance-authority cn lucide-react tw-animate-css

Configure import aliases

Choose one of the following alias setups.

Option A: tsconfig.json paths

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Option B: package.json#imports

package.json
{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolvePackageJsonImports": true
  }
}

The @ alias is a preference. You can use other aliases if you want. If you use package.json#imports, keep the matching alias roots in components.json. See the package imports guide for framework-specific setup.

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.

Add a cn helper

Components import cn directly from the cn package. Re-export it from lib/utils.ts so your own code has a single place to import helpers from.

lib/utils.ts
export { cn } from "cn"

Create a components.json file

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

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-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"
}

If you're using package.json#imports, use the corresponding #... aliases instead:

components.json
{
  "aliases": {
    "components": "#components",
    "utils": "#lib/utils",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks"
  }
}

That's it

You can now start adding components to your project.