Nexanexa
← Reference

@nexa/ui — Visual components

Design tokens + real CSS components, with real tree-shaking: zero JavaScript.

Button

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

nx-btn + a variant (primary/outline). Nothing to declare — nexa build detects the nx-* classes and generates the matching CSS.

Input

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

nx-input. With aria-invalid="true" (which @nexa/forms adds on its own) it already has a red border, nothing extra to declare.

Card

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

nx-card + an optional nx-card-title.

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 adds horizontal scroll on small screens; nx-table-zebra alternates row backgrounds.

Badge

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

nx-badge + a variant: 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 (a circle, 2.5rem by default) + nx-avatar-sm/-lg. With an <img> inside it crops via 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 + a success/warning/danger variant (colored left border). An optional nx-alert-title.

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 shows on :hover/:focus-within — keyboard accessible, zero lines of JS.

Progress

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

nx-progress-bar needs its width set by hand (fixed, or dynamic via data.*) — Nexa doesn't compute any percentage.

Skeleton

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

nx-skeleton is a block with a shimmer animation; the developer sets whatever width/height it needs.

Layout utilities

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

A small, deliberate set, not a full Tailwind-like utility system: nx-flex/nx-gap-N/nx-grid/nx-grid-cols-N/nx-stack.

Dark theme

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

With zero JS, the site already respects the system's prefers-color-scheme. platform.theme.set("dark") lets the user choose explicitly and override the system, persisted with platform.storage().