Nexanexa
← Referencia

@nexa/ui — Componentes visuales

Design tokens + componentes reales en CSS, con tree-shaking real: cero JavaScript.

Button

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

nx-btn + una variante (primary/outline). Sin declarar nada — nexa build detecta las clases nx-* y genera el CSS correspondiente.

Input

<input class="nx-input" type="email" />

nx-input. Con aria-invalid="true" (que agrega @nexa/forms solo) ya tiene borde rojo, sin declarar nada aparte.

Card

<div class="nx-card">
    <h2 class="nx-card-title">Título</h2>
    <p>Contenido.</p>
</div>

nx-card + nx-card-title opcional.

Table

<div class="nx-table-wrap">
    <table class="nx-table nx-table-zebra">
        <thead><tr><th>Cliente</th><th>Estado</th></tr></thead>
        <tbody><tr><td>Hector M.</td><td>Pagado</td></tr></tbody>
    </table>
</div>

nx-table-wrap agrega scroll horizontal en pantallas chicas; nx-table-zebra alterna el fondo de las filas.

Badge

<span class="nx-badge nx-badge-success">Pagado</span>
<span class="nx-badge nx-badge-warning">Pendiente</span>

nx-badge + variante: primary/success/warning/danger/neutral.

Avatar

<span class="nx-avatar nx-avatar-sm">HM</span>
<span class="nx-avatar"><img src="/foto.jpg" alt="Hector" /></span>

nx-avatar (círculo, 2.5rem por defecto) + nx-avatar-sm/-lg. Con un <img> adentro recorta a object-fit: cover.

Alert

<div class="nx-alert nx-alert-warning">
    <p class="nx-alert-title">Stock bajo</p>
    <p>Quedan 3 unidades.</p>
</div>

nx-alert + variante success/warning/danger (borde izquierdo de color). nx-alert-title opcional.

Divider

<hr class="nx-divider" />

nx-divider (horizontal) / nx-divider-vertical.

Tooltip

<span class="nx-tooltip">
    Pasá el mouse acá
    <span class="nx-tooltip-content">Info extra</span>
</span>

nx-tooltip-content se muestra con :hover/:focus-within — accesible con teclado, sin una línea de JS.

Progress

<div class="nx-progress">
    <div class="nx-progress-bar" style="width: 62%"></div>
</div>

nx-progress-bar necesita su width puesto a mano (fijo, o dinámico vía data.*) — Nexa no calcula ningún porcentaje.

Skeleton

<div class="nx-skeleton" style="width: 200px; height: 1rem;"></div>

nx-skeleton es un bloque con animación de shimmer; el desarrollador pone el width/height que necesite.

Utilidades de layout

<nav class="nx-flex nx-gap-3">...</nav>
<ul class="nx-grid nx-grid-cols-3">...</ul>
<main class="nx-stack">...</main>

Un set chico y deliberado, no un sistema de utilidades completo tipo Tailwind: nx-flex/nx-gap-N/nx-grid/nx-grid-cols-N/nx-stack.

Tema oscuro

function setDark() { platform.theme.set("dark"); }
<button class="nx-btn" data-nexa-strategy="load" onClick={setDark}>Oscuro</button>

Sin JS, el sitio ya respeta prefers-color-scheme del sistema. platform.theme.set("dark") deja que el usuario elija y le gane al sistema, persistiendo con platform.storage().