Instalación

Prerrequisitos

• Node.js 20+
• pnpm 9+
• React 19 / Next.js 15
• Tailwind CSS 4

Instalación

El paquete @codeway/ui contiene todos los componentes reutilizables.

# Desde la raíz del monorepo
pnpm add @codeway/ui

# Dependencias peer
pnpm add class-variance-authority clsx tailwind-merge

Configuración de Tailwind

Importa Tailwind CSS 4 en tu archivo globals.css:

@import 'tailwindcss';

body {
  background: #000000;
  color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

Uso básico

import { Button } from '@codeway/ui';
import { Badge } from '@codeway/ui';

export function MyComponent() {
  return (
    <div className="flex items-center gap-4">
      <Badge variant="brand" dot>Nuevo</Badge>
      <Button variant="primary" size="lg">
        Empezar proyecto
      </Button>
    </div>
  );
}

Utilidad cn()

Usamos cn() para combinar clases de Tailwind de forma segura, evitando conflictos:

import { cn } from '@codeway/ui';

// Combina clases sin conflictos
cn('px-4 py-2', 'px-6') // → 'px-6 py-2'
cn('text-red-500', condition && 'text-blue-500') // condicional