Installation

Requirements

• React 19 and Tailwind CSS v4.
• An import alias configured (@/*), like the Next.js default.

1. Create components.json

Create this file at the root of your project and point css to your global stylesheet. You do not need to run shadcn init: it would install shadcn's default tokens, which cd/ui replaces with its own theme.

{
  "style": "new-york",
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

2. Install the theme and every component

One command adds the theme, the `cn` utility, and every component, with their dependencies such as Base UI and Zod. Nothing from shadcn's defaults and no tw-animate.

$ npx shadcn@latest add https://cd-ui.vercel.app/r/all.json

Blocks (optional)

Ready-made sections such as hero, pricing, and footer, all in one item:

$ npx shadcn@latest add https://cd-ui.vercel.app/r/all-blocks.json

Single components

Prefer to start small? Add only what you need by URL. The theme comes first on a new project:

$ npx shadcn@latest add https://cd-ui.vercel.app/r/theme.json https://cd-ui.vercel.app/r/button.json

Namespace shortcut

Want shorter install commands? Add cd/ui to components.json once:

{
  "registries": {
    "@cd": "https://cd-ui.vercel.app/r/{name}.json"
  }
}

npx shadcn@latest add @cd/button @cd/dialog