Overview

Each component has its own subpath (@nizivo/react/button) and its own stylesheet (@nizivo/react/css/button.css). Its page is generated from the built package: live examples with their source, props, parts, data attributes, CSS hooks, accessibility notes and the Figma node ids.

Accordion

Sections that open and close under their headings, such as FAQs or a checkout's order summary. Each item is a native details element, so it works with no JavaScript, and items that share a name open one at a time.

Alert

A tinted message with a title, an optional action and an optional dismiss button. Static and server-rendered unless you add the dismiss leaf.

AppShell

The page's frame. The Sidebar and the TopBar on screens 640 px and wider, the MobileTopBar and the MobileTabBar below that, around the page's main content, switched by CSS with no script.

Avatar

A person's or store's photo with an initials fallback that needs no script, and AvatarGroup, a stack of avatars and a count announced as one item ("Maya, Jonah, Priya, and 4 more").

Badge

A short status label with an optional decorative dot. The label carries the meaning, never the colour alone.

Banner

A page-wide message under the header, one at a time, with a title, a line of text, one action and an optional dismiss. Server-rendered; only the dismiss button hydrates.

Breadcrumb

Where the page sits in the site, as a navigation landmark of links around an ordered list. The last level is the current page, as text with aria-current="page"; a router's link goes in through each item's render.

BulkActionBar

The bar over a selectable table, with how many rows are selected and the actions for them. A server part; TableSelection's island writes the count, and the actions work before hydration.

Button

A native button in five variants and three sizes, with a pending state that keeps focus. Compose it into triggers and links through render.

Card

A surface with optional header, title, description, action, body and footer parts. The inverse tone flips every token inside it; brand and accent are the tinted surfaces of the dashboard widgets (KpiTile's tone), with no stroke.

Checkbox

A native checkbox with its label, including the indeterminate (mixed) state. It submits with the form before hydration; inside a Field it is labelled, described and validated by the Field.

ChipGroup

Pill-shaped choices such as a product's colours or sizes, or filters. Native radios inside labels for one value, or checkboxes with multiple, so it submits, resets and works before hydration. Swatches go in each Chip's leading slot; an unavailable chip keeps its colour and is struck through. Inside a Field, give the Field group.

ChoiceCard

A choice drawn as cards, such as a saved payment method or a delivery speed. Each ChoiceCard is a label around a real, visible native radio, with slots for a leading mark (a card brand), a second line and trailing content such as a "Default" Badge. ChoiceCardGroup is the radio group; inside a Field, give the Field group, and its error marks the chosen card invalid.

Combobox

A text input that suggests items from a list as the reader types, such as a country in a checkout form or search suggestions. Input's box, with Select's popup and rows; React Aria's ComboBox inside.

CommandMenu

Unstable: a searchable list of places and actions in a dialog, opened with ⌘K (Ctrl+K elsewhere) or a button, as Figma's Command Menu draws it. Import it from @nizivo/react/unstable/command-menu.

Container

Centres page content: at most --nz-layout-content-max wide (358, 976, 1280 px by viewport), with the responsive page margin --nz-grid-margin (16, 24, 32 px) on both sides.

DataView

The same records as a table on a wide screen and as a list on a narrow one. The server renders both and a container query shows one, by the view's own width, so nothing changes on hydration.

DateRangePicker

Unstable: a range of dates from a trigger in Select's look, through a popover with presets, one month of calendar and Cancel and Apply. Values are ISO plain dates; "today" is counted in the time zone you pass. Import it from @nizivo/react/unstable/date-range-picker.

Delta

A signed change, such as +12.4%, coloured by direction and read with a visually hidden comparison. The sign carries the direction without colour.

Dialog

A modal dialog or alert dialog with a trigger, title, description, body, footer and close parts. Focus moves in on open and returns to the trigger on close.

Drawer

A modal panel that slides in from an edge of the viewport, for details or a task beside the page, with a header, a body that scrolls and a footer. side="bottom" is a bottom sheet.

EmptyState

Figma: "A render, a headline, one action. No paragraphs."

Field

The label, help text and error around one form control. A server-safe shell; inside it, Nizivo controls pick up their id, name, flags and description wiring, and native validation messages show inline.

Fieldset

A native fieldset and legend for related controls, such as a row of switches or checkboxes, with a shared description and error. Disabling it disables every control inside, with no client code.

FileUpload

A dropzone over a native file input, with a list of the chosen files. Before any JavaScript runs, a click or a drop chooses files and a plain form submits them; hydrated, it checks each file against accept and maxSize and shows the upload state your code reports for each one.

Form

An optional client <form> for forms whose errors come back from the server. Errors keyed by Field name appear in each Field, focus moves to the first invalid control, and an optional error summary links to each one. SubmitButton is pending while the form's action runs; FormMessage is the form-level message.

Grid

The page grid: --nz-grid-columns columns (4, 8, 12 by viewport). Items snap to spans.

Heading

A heading whose outline level (h1 to h6) and look (the heading text style) are set independently.

IconButton

A square button that shows only an icon. Its required label is the button's accessible name and, by default, the text of a tooltip shown on hover and keyboard focus.

Image

An <img> that never writes an inline style, so it renders under a strict CSP (§19.3).

Inline

Children in a row, centred on the cross axis, wrapping onto new lines when they do not fit.

InlineError

One error look for fields and data widgets: icon + text, never colour alone. Not a live region.

Input

A single-line native text input in a bordered box, with optional icons and text affixes. Inside a Field it is labelled, described and validated by the Field.

Kbd

A keyboard shortcut drawn for both platforms, such as ⌘K and Ctrl+K; CSS shows the one for the current platform.

KpiTile

One number, its change and its shape, on Card's surface. Tint a row of related KPIs with tone, which no longer follows the trend. The Suspense fallback is the same tile with status="loading".

Meter

A native meter for a measurement within a known range, such as storage used, with low, high and optimum thresholds.

Metric

A label, a number and its change, the block Figma draws in both the KPI tile and the Revenue card. It takes the loading, empty and error contract, and keeps its box in all four states.

MobileTabBar

Five destinations at the bottom of the screen below 640 px, in place of the Sidebar. They are links in a navigation landmark, and More opens the rest in a bottom sheet.

MobileTopBar

The bar above the page below 640 px, with the store's mark or a back link, the page's name, and icon buttons for search and notifications.

Motion

CountUp: a number that counts up to its value on the client, while the server renders the final value in NumberValue's element. Tabular digits that keep their width, 0 ms under reduced motion, and nothing announced while it counts. Also useCountUp, for an element of your own.

NativeSelect

The browser's own select, styled like the Select trigger. Server-safe with no client code; use it where the native picker is the better choice, such as on phones or in Server Component forms.

NavItem

One sidebar destination, as a native link with an icon, a label and an optional count. The current one is aria-current="page"; a router's link goes in through render. In a Sidebar's icon rail it folds to its icon, with no prop; SidebarItem adds the rail's Tooltip.

NumberField

A number in the reader's locale, a price, a percent or a unit, in Input's box. It formats on blur, parses what is typed in the locale, clamps to min and max, and steps with the arrow keys; step buttons are optional. A form gets the plain number.

NumberValue

A number formatted once with Intl.NumberFormat, in a <data> element whose value attribute keeps the raw number. Tabular figures, so a column of values lines up. Every dashboard part renders its numbers with it.

PageHeader

The top of a page, under the shell's top bar. The page's one <h1>, an optional status beside it and a line under it, and the page's controls at the row's end. Server-rendered, no client JS.

PageIndicator

Where a carousel, a product's photos or an onboarding sequence is, as dots or as a "2 / 9" chip. The visual is decorative; a visually hidden "2 of 9" tells a screen reader the same.

Pagination

Page links for a list whose page is in the URL, with an optional summary ("Showing 1–20 of 248"). A navigation landmark with previous and next links, the page numbers with aria-current="page" on the current one, and gaps that keep the number of slots constant while you page.

PasswordInput

A native password input in Input's box, with a toggle that shows the password. The toggle keeps one name, "Show password", and says whether the password shows through its pressed state; a submit hides the password again.

PointerFx

A card that tilts toward a mouse pointer and lifts, or a button that leans toward it. Decorative, mouse only, and still under reduced motion. Also usePointerFx, for an element of your own in a client component.

Popover

A small dialog anchored to its trigger, for status, quick settings and filters. It has a title, a description, any controls, and a close button; Escape or a press outside closes it, and focus returns to the trigger.

ProgressBar

A native progress bar for a task or goal, determinate or indeterminate, with a visible label and value.

ProgressRing

A circular progress indicator in three sizes, exposed as a progressbar or, for a measurement, as a meter.

QuantityStepper

A whole-number quantity, such as a product page's or a cart line's, in Input's box between a minus and a plus button. The input is a native number input; the buttons step it for the pointer and are disabled at the ends of the range.

RadioGroup

One choice from a short list of native radios, in a fieldset with a legend. The shell is server-rendered; one small client part passes the group's name and value to each radio.

RankedList

Top products, channels or regions as an ordered list, each row a label, its value and a bar relative to the leader. The bars are decorative; the values are printed.

SearchField

A search or filter input in a <search> landmark, with a magnifier, a clear button and an optional shortcut hint. Inside a <form method="get"> it filters with no JavaScript; inside a Field it is labelled, described and validated by the Field. It is also the top bar's search, as a real input.

SegmentedControl

A compact single choice between a few options, such as a chart's time range. Native radios inside labels, so it submits, resets and works before hydration. Inside a Field, give the Field group.

Select

A single-choice list box with a button trigger, groups and separators, backed by a hidden native select so forms submit and reset as usual.

Separator

An <hr>: a 1 px border/subtle line, Figma's Divider (7370:95). Decorative by default; spacing comes first, a line only when spacing is not enough (the Figma doc).

Sidebar

The app's main navigation on screens 640 px and wider, with the store at the top, the destinations, and Settings at the foot. It is 264 px wide from 1280 px and folds to a 72 px icon rail below that, where each destination's Tooltip names it.

Skeleton

One placeholder block, always hidden from assistive technology. The region it stands in for sets aria-busy and carries visually hidden "Loading …" text (§16.5). There is no style prop path: size it with a class, or with --nz-skeleton-width, --nz-skeleton-height and --nz-skeleton-radius.

Split

A main column and an aside, side by side while there is room and stacked below that, by the Split's own width, with no breakpoint and no script.

Stack

Children in a column.

StickyBar

A bar of actions that sticks to the bottom of the viewport while its section scrolls, above the device's home indicator and the shell's bottom tab bar.

Surface

A panel of the page's surface colour, solid or glass. Glass is the surface at 72 % over a blurred backdrop, for a panel over a photo, a shader or a busy page, and it stays opaque wherever the blur is not available.

Switch

An on or off setting that applies at once, drawn as a track and thumb. A native checkbox with role switch, so it submits with the form before hydration.

TabNav

Links styled as tabs, for views that are URLs (status filters, sub-pages). A navigation landmark of plain links with aria-current="page" on the current one, server-rendered with no JavaScript; a router's link goes in through render. In-page views with panels are Tabs.

Table

A native table in server-rendered parts, for orders, products and customers. Rows can link to a detail page as a whole, columns sort through the URL, and number columns line up. No client JS.

TableSelection

Row checkboxes for Table's bulk actions. Native checkboxes rendered on the server submit the checked ids with their form before any JavaScript runs; one small client island adds select-all, Shift-click ranges and Escape.

Tabs

In-page views of one subject, one panel at a time, as WAI-ARIA tabs. Only the selected panel is rendered, on the server too; keepMounted keeps a panel's state while it is hidden. When each view is a URL, use TabNav; to pick a range or a value, use SegmentedControl.

Text

Body, label, numeric and mono text in the Nizivo text styles and text colours, as a paragraph or any element through render.

Textarea

A multi-line native text area, at least 112 px tall, that grows with its content where the browser supports field-sizing and can be resized vertically. Inside a Field it is labelled, described and validated by the Field.

ThemeScript

Sets page-level attributes before first paint, so nothing changes once the page has painted: the reader's saved theme (data-nz-theme from localStorage key nz-theme: light, dark or system) and data-nz-platform (apple or other). The rules are on themeScript. Render it in <head> (<head><ThemeScript nonce={nonce} /></head> in a root layout), put the app's default theme on <html> (data-nz-theme="system", or none for light), and put suppressHydrationWarning on <html>, whose attributes the script changes.