Instalação

Requisitos

• React 19 e Tailwind CSS v4.
• Um alias de importação configurado (@/*), como o padrão do Next.js.

1. Crie o components.json

Crie este arquivo na raiz do projeto e aponte css para o seu estilo global. Não precisa rodar shadcn init: ele instalaria os tokens padrão do shadcn, que o cd/ui troca pelo próprio tema.

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

2. Instale o tema e todos os componentes

Um comando adiciona o tema, o utilitário `cn` e todos os componentes, com as dependências como Base UI e Zod. Nada dos padrões do shadcn e sem tw-animate.

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

Blocos (opcional)

Seções prontas como hero, preços e rodapé, todas em um item:

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

Componentes avulsos

Prefere começar pequeno? Adicione só o que precisa pela URL. Em projeto novo, o tema vem primeiro:

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

Atalho com namespace

Quer encurtar os próximos comandos? Registre o cd/ui uma vez no components.json:

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

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