Paso 7

Estilos con @nexa/ui

Design tokens + 4 componentes reales en CSS (Button, Input, Card, Dialog), con tree-shaking real: el sitio solo envía el CSS de los componentes que de verdad usa. Sí, son solo 4 hoy — @nexa/ui es deliberadamente chico, no un kit completo (más abajo, cómo completarlo rápido si necesitás más).

Usar una clase

<button class="nx-btn nx-btn-primary">Comprar</button>

Sin declarar nada — nexa build ya detecta las clases nx-* y genera el CSS correspondiente.

Declararlo en nexa.toml

nexa add ui
# Instalado @nexa/ui v0.1.0 (stable).
# Registrado en nexa.toml y nexa.lock.

nexa add ui registra el módulo — no descarga nada (ya está embebido en el binario), solo hace que nexa.toml refleje la realidad y nexa build deje de avisar.

Tree-shaking real

# dist/assets/nexa-ui.<hash>.css
# solo trae tokens + .nx-btn — nada de .nx-dialog si no se usó

nexa-ui.css lleva solo los tokens + los componentes que el sitio completo usa — una página 100% estática del mismo proyecto no lo enlaza en absoluto.

¿Cuántos componentes hay, y qué hacer si necesitás más?

<!-- Tailwind Play CDN: rápido para prototipar; para producción, compilar el CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- componentes ya armados sobre Tailwind -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css">

<!-- o, clásico -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Hoy son exactamente 4: nx-btn, nx-input, nx-card, nx-dialog (más los tokens de color/espaciado/radio) — la lista completa, con cada modificador, está en docs/REFERENCIA.md del repo de Nexa. Para armar un diseño completo rápido tenés tres caminos, y los tres usan el mismo mecanismo (un <link>, visto en el paso anterior): (1) escribir tu propio CSS de cero — este mismo tutorial lo hace así, un site.css a mano enlazado en el layout; (2) usar Tailwind (por CDN para prototipar, o tu propio build para producción) + un kit de componentes ya armados sobre Tailwind como DaisyUI o Flowbite; o (3) usar Bootstrap, PrimeVue/PrimeReact, o el que prefieras. @nexa/ui y un framework de terceros no compiten — podés usar nx-btn para lo simple y Tailwind/Bootstrap para el resto del layout, en la misma página.

Toast/snackbar para dashboards: ui.notify()

function saveOk() {
    ui.notify({ message: "Guardado con éxito", variant: "success" });
}

function saveError() {
    ui.notify({ message: "No se pudo guardar", variant: "danger", duration: 0 });
}

No confundir con platform.notify() (una notificación real del sistema operativo, vista en el paso de librerías) — ui.notify() es una notificación efímera dentro de la página, tipo $q.notify() de Quasar. Se apila con otras, se auto-cierra a los 4s (duration: 0 lo desactiva), es accesible (role="status") y no necesita declarar nada: ui ya es builtin, igual que para el Dialog.