Vite

Framework

Como instalar e configurar WI.UI em um projeto Vite + React com Tailwind v4.

Pre-requisitos

Vite 5+
React 18+ ou 19
Tailwind CSS v4
TypeScript (recomendado)

Se ainda nao tem um projeto, crie com:

pnpm create vite meu-projeto --template react-ts

Depois instale Tailwind v4:

pnpm add -D tailwindcss @tailwindcss/vite

Via CLI (recomendado)

O CLI detecta Vite automaticamente e configura tudo.

pnpm dlx @wi-ui/cli init

Instalacao manual

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 Vite com Tailwind

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

4. Configurar path alias no TypeScript

tsconfig.json

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

5. Criar pasta de componentes

mkdir -p src/components/ui

Configuracao

wi-ui.json

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

CSS com Tailwind v4 e design tokens:

src/index.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);
}

.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

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

Ou copie manualmente da documentacao para src/components/ui/.

Uso

src/App.tsx

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

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

export default App;

Estrutura do projeto

meu-projeto/
├── src/
│   ├── components/
│   │   └── ui/              # Componentes WI.UI
│   │       ├── button.tsx
│   │       └── ...
│   ├── lib/
│   │   └── cn.ts            # Utilitario de classes
│   ├── App.tsx
│   └── index.css            # Tailwind + tokens
├── vite.config.ts
├── wi-ui.json               # Config WI.UI
└── package.json