Remix

Framework

Como instalar e configurar WI.UI em um projeto Remix com Tailwind v4.

Pre-requisitos

Remix 2+ ou React Router 7
React 18+ ou 19
Tailwind CSS v4
TypeScript (recomendado)

Se ainda nao tem um projeto:

pnpm create remix@latest meu-projeto

Via CLI (recomendado)

O CLI detecta Remix automaticamente.

pnpm dlx @wi-ui/cli init

Instalacao manual

1. Instalar dependencias

pnpm add clsx tailwind-merge

2. Criar utilitario cn()

app/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

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

4. Criar pasta de componentes

mkdir -p app/components/ui

Configuracao

wi-ui.json

{
  "framework": "remix",
  "componentsDir": "app/components/ui",
  "libDir": "app/lib",
  "importAlias": "~/"
}

CSS com design tokens:

app/tailwind.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);
}

Importe o CSS no root.tsx:

app/root.tsx

import "./tailwind.css";

Adicionar componente

pnpm dlx @wi-ui/cli add button card

Uso

app/routes/_index.tsx

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

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

Estrutura do projeto

meu-projeto/
├── app/
│   ├── components/
│   │   └── ui/              # Componentes WI.UI
│   │       ├── button.tsx
│   │       └── ...
│   ├── lib/
│   │   └── cn.ts            # Utilitario de classes
│   ├── routes/
│   │   └── _index.tsx
│   ├── root.tsx
│   └── tailwind.css         # Tailwind + tokens
├── wi-ui.json               # Config WI.UI
└── package.json