Instalación

Requisitos

• •React 19 y Next.js App Router (o cualquier setup con React 19).
• •Tailwind CSS v4.
• •Un components.json con el registry @vexa configurado.

1. Configura el registry

Añade el namespace @vexa a tu components.json para que la CLI de shadcn sepa dónde resolver los items @vexa/*:

{
  "registries": {
    "@vexa": "https://vexa.valfiguer.com/r/{name}.json"
  }
}

2. Instala el tema

Añade el contrato de tokens una vez. Define los tokens semánticos --vexa-* para los tres temas más el mapeo de Tailwind v4. Impórtalo después de Tailwind:

Luego importa la hoja de estilos en tu CSS global:

/* app/globals.css */
@import "tailwindcss";
@import "./vexa.css"; /* the installed VEXA token contract */

3. Añade tu primer componente

Instala un primitivo. Sus dependencias del registry (como @vexa/utils, que aporta el helper cn) se resuelven automáticamente:

Los archivos llegan a tu proyecto como código fuente — components/vexa/button.tsx y lib/utils.ts — listos para leer y editar.

4. Úsalo

Importa desde tu alias y compón. Los primitivos estáticos se quedan en el servidor; añade interactividad en la hoja cliente.

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

// Server Component — no "use client" needed.
export function SaveBar() {
  return <Button variant="primary">Save changes</Button>;
}