Começando

O que é WI.UI?

WI.UI é uma coleção de componentes React independentes. Você copia o código direto para o seu projeto e tem controle total. Sem black-box, sem dependências ocultas.

• TypeScript com tipagem completa
• Dark mode nativo via classe .dark
• Mobile-first e acessível
• Tailwind v4 + design tokens customizáveis
• Tema padrão configurado automaticamente no init
• Componentes Base, FOMO/Conversão e Animação

Frameworks

WI.UI funciona com qualquer framework React. O CLI detecta automaticamente seu setup.

Instalação

Inicialize o WI.UI no seu projeto. O CLI configura tudo automaticamente: cria o arquivo de configuração, instala dependências base e prepara a pasta de componentes.

Isso vai criar:

• wi-ui.json — configuração do projeto
• src/lib/cn.ts — utilitário de classes
• globals.css — tema padrão com variáveis de cor, tipografia e sombras (light + dark)
• src/components/ui/ — pasta dos componentes

Adicionar componente

Adicione componentes ao seu projeto com um comando. O CLI copia o código e instala dependências automaticamente.

O componente será copiado para src/components/ui/button/ e suas dependências instaladas.

Uso

Após adicionar um componente, importe e use normalmente:

import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <div className="flex gap-2">
      <Button>Confirmar</Button>
      <Button variant="outline">Cancelar</Button>
    </div>
  );
}