Getting started

nalarx-ui holds the tokens, base styles and primitives behind the NalarX product UI. Apps do not install it as a package. The shadcn CLI copies each item's source into the app, where it becomes ordinary app code.

Two things keep those copies honest:

• every item has a version and a changelog, so an app knows what it has and what changed since;
• the app keeps a lockfile with a fingerprint of every copied file, and CI fails when a copied file changes without a recorded reason.

What ships todayCopy Anchor Link

Item	Version	What it is
@nalarx/alert	0.1.0	An inline notice in a neutral box; the leading icon carries the tone.
@nalarx/app-dialog	0.1.0	In-app alert, confirm, type-to-confirm and prompt that resolve as promises.
@nalarx/badge	0.1.0	A neutral pill for short labels; status shows as a small coloured dot.
@nalarx/base	0.1.1	The Tailwind colour bridge, document defaults, shared nx-* utilities and keyframes, and the cn helper primitives import.
@nalarx/button	0.1.0	The NalarX button: five sizes, eight variants, tones, selected state, press feedback and an instant tooltip.
@nalarx/card	0.1.0	An elevated surface with a hairline, plus header, title, description, action, content and footer parts.
@nalarx/checkbox	0.1.0	A 16px checkbox with checked and indeterminate states in ink.
@nalarx/connector-tile	0.1.0	A brand-coloured monogram square for a connector without a logo.
@nalarx/date-picker	0.2.0	A date field that opens a themed, keyboard-navigable month calendar, plus the Calendar panel on its own.
@nalarx/dialog	0.1.0	A centred modal for a short form or a result that needs the user's whole attention, plus the shared dialog backdrop.
@nalarx/disclosure	0.1.0	A native details element whose content slides open.
@nalarx/dots-loader	0.1.0	The 3×3 dot wave NalarX shows while an agent is working.
@nalarx/drag-row	0.1.0	Drag to reorder a short list by a handle in the row's gutter, on native HTML5 drag and drop.
@nalarx/drift-check	0.1.0	Records the version and sha256 of every installed nalarx-ui file in nalarx-ui.lock.json and fails when an installed file changes without a recorded reason.
@nalarx/empty-state	0.1.0	The guiding "nothing here yet" block and its failure twin, ErrorState.
@nalarx/field	0.1.0	A label, a control and one line under it for the hint or the error.
@nalarx/icon	0.2.0	The NalarX outline icon set (245 names) as one typed component; unknown names draw a neutral fallback.
@nalarx/input	0.1.0	A single-line text input in two heights with the shared ink focus ring.
@nalarx/kbd	0.1.0	A keyboard key or shortcut hint.
@nalarx/lazy-more	0.1.0	The load-more trigger at the foot of a paged list: loads on scroll, stays a button.
@nalarx/loading-overlay	0.1.0	A frosted veil with a spinner over a card or the whole screen while a save is in flight.
@nalarx/menu	0.1.0	A dropdown of actions, links and single-choice options, and the overlay classes Select and Picker share.
@nalarx/modal-close-button	0.1.1	The close X for dialogs, sheets and panels.
@nalarx/note	0.1.0	A short neutral note under a row or field; the icon carries the tone.
@nalarx/pagination	0.1.0	Previous/next paging for short lists and a numbered footer with rows per page for tables.
@nalarx/picker	0.1.0	A pill that opens a menu of described choices, for switching a model, agent or mode.
@nalarx/radio-group	0.1.0	A set of options where exactly one is chosen.
@nalarx/select	0.1.0	The one dropdown: a listbox with typeahead, or a searchable list with groups and an optional create row.
@nalarx/separator	0.1.0	A hairline between groups of content, horizontal or vertical.
@nalarx/sheet	0.1.0	A side panel that slides in from the right, for detail views and longer forms.
@nalarx/skeleton	0.1.0	Shimmering placeholder shapes (line, text block, card, row) sized like the content they stand in for.
@nalarx/spinner	0.1.0	An indeterminate busy ring in the current text colour; still under reduced motion.
@nalarx/steps	0.1.0	Ordered steps joined by one line: numbered actions, or a schedule with day or time markers.
@nalarx/switch	0.1.1	An on/off control with the fixed 34×20 NalarX geometry.
@nalarx/table	0.1.0	A dense data table with hairline rows, a sunken header and sideways scroll when the columns do not fit.
@nalarx/tabs	0.2.0	Pill and underline tabs on Base UI with a sliding thumb or underline, plus SegmentedTabs, the key-based form the apps use.
@nalarx/textarea	0.1.0	A multi-line text input that grows with its content; same look as Input.
@nalarx/theme	0.1.0	NalarX product tokens for light and dark (colour, radius, density, motion, type, layers) plus Tailwind keys for the design scales.
@nalarx/toast	0.1.0	Notification cards in one shared bottom-right column, with tone on the border and text, a Dismiss button and hover-to-hold auto-dismiss.
@nalarx/toggle-group	0.1.0	A segmented control: the pressed item lifts out of a sunken track.
@nalarx/tooltip	0.1.0	A tooltip rendered outside its trigger, shown at once on hover or focus.
@nalarx/ui-strings	0.1.0	English defaults for the text primitives show on their own, and an optional provider that swaps in the app's translations.
@nalarx/visual	0.1.0	Small data pictures: status dot, sparkline, meter, split bar, ring, mini bars, icon tile, stat tile and strip.

Primitives (buttons, chips, inputs, dialogs and so on) are being ported from nalarx-frontend and will appear under Components.

How an app uses itCopy Anchor Link

1. Point the app's components.json at the @nalarx registry. See Installation.
2. Install items with bunx shadcn@latest add @nalarx/<item>.
3. Record what was installed with bun scripts/nalarx-ui-drift.ts record <item...>.
4. Run bun scripts/nalarx-ui-drift.ts check in CI.

When an installed file needs a change, change it here first and release a new version. See Contributing.

ScopeCopy Anchor Link

This registry covers product UI: the web app and the NalarX Platform staff app. Marketing pages and the brand book live in nalarx-ace and are out of scope.