Instalação

Pré-requisitos

A kodda UI é uma camada acima do shadcn/ui. Você precisa de:

• React 18+ e Next.js 14+ (ou outro framework com suporte a RSC)
• Tailwind CSS v4 configurado
• shadcn/ui já inicializado no projeto (npx shadcn@latest init)

Inicializar

Execute o comando init na raiz do seu projeto:

npx @koddaai/ui init

O comando irá:

1. Detectar se shadcn/ui está configurado
2. Validar dependências base (react, tailwindcss)
3. Criar o arquivo kodda.json com a configuração
4. Criar a estrutura de diretórios para componentes kodda

Estrutura criada

seu-projeto/
├── components/
│   ├── ui/          # Primitivos shadcn/ui (já existente)
│   └── kodda/       # Compostos kodda UI ← novo
├── hooks/           # Hooks kodda UI ← novo
├── tokens/          # Design tokens ← novo
└── kodda.json       # Configuração ← novo

Adicionar componentes

Instale componentes individualmente:

npx @koddaai/ui add landing-hero
npx @koddaai/ui add landing-features
npx @koddaai/ui add landing-cta

O CLI resolve dependências automaticamente.

Listar componentes

Veja todos os componentes disponíveis:

npx @koddaai/ui list

Uso

Após instalar, importe diretamente do seu projeto:

import { LandingHero } from "@/components/kodda/landing-hero"
import { LandingFeatures } from "@/components/kodda/landing-features"
import { LandingCta } from "@/components/kodda/landing-cta"