Every NalarX screen starts here.
The tokens, base styles and primitives of the NalarX product UI. Apps copy them in with the shadcn CLI and keep a lockfile, so a local edit never drifts unnoticed.
The product palette, both ways
One card built only from the theme names, rendered with the light and dark tokens that ship in @nalarx/theme.
light
Net sales this month
Rp132.4MLimit Rp100M. Usually Rp88M by this date.dark
Net sales this month
Rp132.4MLimit Rp100M. Usually Rp88M by this date.- 1
Install
The CLI copies the source into the app. It becomes the app's own code.
bunx shadcn@latest add @nalarx/base - 2
Record
The lockfile stores each item's version and a fingerprint of every file.
bun scripts/nalarx-ui-drift.ts record base - 3
Check
CI fails when a copied file changes without a reason written next to it.
bun scripts/nalarx-ui-drift.ts check
In the registry
@nalarx/alert0.1.0An inline notice in a neutral box; the leading icon carries the tone.@nalarx/app-dialog0.1.0In-app alert, confirm, type-to-confirm and prompt that resolve as promises.@nalarx/badge0.1.0A neutral pill for short labels; status shows as a small coloured dot.@nalarx/base0.1.1The Tailwind colour bridge, document defaults, shared nx-* utilities and keyframes, and the cn helper primitives import.@nalarx/button0.1.0The NalarX button: five sizes, eight variants, tones, selected state, press feedback and an instant tooltip.@nalarx/card0.1.0An elevated surface with a hairline, plus header, title, description, action, content and footer parts.@nalarx/checkbox0.1.0A 16px checkbox with checked and indeterminate states in ink.@nalarx/connector-tile0.1.0A brand-coloured monogram square for a connector without a logo.@nalarx/date-picker0.2.0A date field that opens a themed, keyboard-navigable month calendar, plus the Calendar panel on its own.@nalarx/dialog0.1.0A centred modal for a short form or a result that needs the user's whole attention, plus the shared dialog backdrop.@nalarx/disclosure0.1.0A native details element whose content slides open.@nalarx/dots-loader0.1.0The 3×3 dot wave NalarX shows while an agent is working.@nalarx/drag-row0.1.0Drag to reorder a short list by a handle in the row's gutter, on native HTML5 drag and drop.@nalarx/drift-check0.1.0Records 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-state0.1.0The guiding "nothing here yet" block and its failure twin, ErrorState.@nalarx/field0.1.0A label, a control and one line under it for the hint or the error.@nalarx/icon0.2.0The NalarX outline icon set (245 names) as one typed component; unknown names draw a neutral fallback.@nalarx/input0.1.0A single-line text input in two heights with the shared ink focus ring.@nalarx/kbd0.1.0A keyboard key or shortcut hint.@nalarx/lazy-more0.1.0The load-more trigger at the foot of a paged list: loads on scroll, stays a button.@nalarx/loading-overlay0.1.0A frosted veil with a spinner over a card or the whole screen while a save is in flight.@nalarx/menu0.1.0A dropdown of actions, links and single-choice options, and the overlay classes Select and Picker share.@nalarx/modal-close-button0.1.1The close X for dialogs, sheets and panels.@nalarx/note0.1.0A short neutral note under a row or field; the icon carries the tone.@nalarx/pagination0.1.0Previous/next paging for short lists and a numbered footer with rows per page for tables.@nalarx/picker0.1.0A pill that opens a menu of described choices, for switching a model, agent or mode.@nalarx/radio-group0.1.0A set of options where exactly one is chosen.@nalarx/select0.1.0The one dropdown: a listbox with typeahead, or a searchable list with groups and an optional create row.@nalarx/separator0.1.0A hairline between groups of content, horizontal or vertical.@nalarx/sheet0.1.0A side panel that slides in from the right, for detail views and longer forms.@nalarx/skeleton0.1.0Shimmering placeholder shapes (line, text block, card, row) sized like the content they stand in for.@nalarx/spinner0.1.0An indeterminate busy ring in the current text colour; still under reduced motion.@nalarx/steps0.1.0Ordered steps joined by one line: numbered actions, or a schedule with day or time markers.@nalarx/switch0.1.1An on/off control with the fixed 34×20 NalarX geometry.@nalarx/table0.1.0A dense data table with hairline rows, a sunken header and sideways scroll when the columns do not fit.@nalarx/tabs0.2.0Pill and underline tabs on Base UI with a sliding thumb or underline, plus SegmentedTabs, the key-based form the apps use.@nalarx/textarea0.1.0A multi-line text input that grows with its content; same look as Input.@nalarx/theme0.1.0NalarX product tokens for light and dark (colour, radius, density, motion, type, layers) plus Tailwind keys for the design scales.@nalarx/toast0.1.0Notification 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-group0.1.0A segmented control: the pressed item lifts out of a sunken track.@nalarx/tooltip0.1.0A tooltip rendered outside its trigger, shown at once on hover or focus.@nalarx/ui-strings0.1.0English defaults for the text primitives show on their own, and an optional provider that swaps in the app's translations.@nalarx/visual0.1.0Small data pictures: status dot, sparkline, meter, split bar, ring, mini bars, icon tile, stat tile and strip.