Step 7

Styling with @nexa/ui

Design tokens + 4 real CSS components (Button, Input, Card, Dialog), with real tree-shaking: the site only ships the CSS of the components it actually uses. Yes, only 4 today — @nexa/ui is deliberately small, not a full kit (see below for how to fill the gap fast if you need more).

Using a class

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

No declaration needed — nexa build already detects nx-* classes and generates the matching CSS.

Declaring it in nexa.toml

nexa add ui
# Installed @nexa/ui v0.1.0 (stable).
# Registered in nexa.toml and nexa.lock.

nexa add ui registers the module — it doesn't download anything (it's already embedded in the binary), it just makes nexa.toml reflect reality and stops nexa build from warning.

Real tree-shaking

# dist/assets/nexa-ui.<hash>.css
# only ships tokens + .nx-btn — nothing from .nx-dialog if unused

nexa-ui.css only carries the tokens plus the components the whole site actually uses — a fully static page in the same project doesn't link it at all.

How many components are there, and what if you need more?

<!-- Tailwind Play CDN: fast for prototyping; compile the CSS for production -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- ready-made components on top of Tailwind -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css">

<!-- or, the classic choice -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Today there are exactly 4: nx-btn, nx-input, nx-card, nx-dialog (plus color/spacing/radius tokens) — the full list, with every modifier, lives in docs/REFERENCIA.md in Nexa's repo. To put together a complete design fast you've got three paths, and all three use the same mechanism (a plain <link>, from the previous step): (1) write your own CSS from scratch — this very tutorial does exactly that, a hand-written site.css linked from the layout; (2) use Tailwind (via CDN to prototype, or your own build for production) plus a ready-made component kit built on Tailwind like DaisyUI or Flowbite; or (3) use Bootstrap, PrimeVue/PrimeReact, or whatever you prefer. @nexa/ui and a third-party framework aren't competing — you can use nx-btn for the simple stuff and Tailwind/Bootstrap for the rest of the layout, on the same page.

Toast/snackbar for dashboards: ui.notify()

function saveOk() {
    ui.notify({ message: "Saved successfully", variant: "success" });
}

function saveError() {
    ui.notify({ message: "Couldn't save", variant: "danger", duration: 0 });
}

Not to be confused with platform.notify() (a real OS-level notification, from the libraries step) — ui.notify() is an ephemeral notification inside the page, like Quasar's $q.notify(). It stacks with others, auto-closes after 4s (duration: 0 disables that), is accessible (role="status"), and needs no declaration: ui is already builtin, same as for Dialog.