Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

Manual Installation

Install shadcn.io without the shadcn CLI by copying config and files manually.

Manual setup gives you full control over every file. Use this when the CLI does not fit your setup or you prefer to wire the project yourself.

Add Tailwind CSS

Components are styled using Tailwind CSS. Install Tailwind CSS in your project first:

Follow the Tailwind CSS installation instructions.

Add dependencies

Add the dependencies used by shadcn.io components:

bun add @ark-ui/react tailwind-variants cn lucide-react

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 needed. If you use package.json#imports, keep the matching alias roots in components.json.

Configure styles

Create a file styles/globals.css and follow Styling to configure the theme.

Add a cn helper

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

Create a components.json file

Create a components.json file in the project root so the shadcn CLI knows where to write components if you use it later.

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "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"
  }
}

Adding components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json