Next.js

Framework

Como instalar e configurar WI.UI em um projeto Next.js com App Router e Tailwind v4.

Pre-requisitos

Next.js 14+ (App Router recomendado)
React 18+ ou 19
Tailwind CSS v4
TypeScript (recomendado)

Se ainda nao tem um projeto, crie com:

pnpm create next-app@latest meu-projeto --ts --tailwind --app

Via CLI (recomendado)

O jeito mais rapido. O CLI detecta Next.js automaticamente e configura tudo: cria wi-ui.json, instala clsx + tailwind-merge e gera o utilitario cn().

pnpm dlx @wi-ui/cli init

Depois adicione componentes:

pnpm dlx @wi-ui/cli add button

Instalacao manual

Se preferir configurar manualmente, siga esses passos.

1. Instalar dependencias

pnpm add clsx tailwind-merge

2. Criar utilitario cn()

src/lib/cn.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Configurar path alias

Verifique que tsconfig.json tem o alias @/:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. Criar pasta de componentes

mkdir -p src/components/ui

Configuracao

O CLI cria o arquivo wi-ui.json na raiz do projeto. Se instalou manualmente, crie assim:

wi-ui.json

{
  "framework": "nextjs",
  "componentsDir": "src/components/ui",
  "libDir": "src/lib",
  "importAlias": "@/"
}

Certifique-se que seu globals.css importa Tailwind:

src/app/globals.css

@import "tailwindcss";

@theme {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-muted: oklch(0.97 0 0);
  --color-muted-foreground: oklch(0.556 0 0);
  --color-border: oklch(0.922 0 0);
  --color-primary: oklch(0.8234 0.1927 206.47);
  /* ... adicione mais tokens conforme necessario */
}

.dark {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.269 0 0);
  --color-muted-foreground: oklch(0.708 0 0);
  --color-border: oklch(0.269 0 0);
}

Adicionar componente

Com CLI:

pnpm dlx @wi-ui/cli add button card badge

Sem CLI: copie o codigo do componente da documentacao para src/components/ui/. Cada componente mostra o codigo-fonte completo na sua pagina de docs.

Uso

src/app/page.tsx

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

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <Button>Comecar agora</Button>
    </main>
  );
}

Estrutura do projeto

meu-projeto/
├── src/
│   ├── app/
│   │   ├── globals.css      # Tailwind + design tokens
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── ui/              # Componentes WI.UI
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       └── ...
│   └── lib/
│       └── cn.ts            # Utilitario de classes
├── wi-ui.json               # Config WI.UI
├── tsconfig.json
└── package.json