Components

The three-row application scaffold: toolbar over a left/main/right body over a status bar.

The header bar: a title plus structured start, center, and end regions for actions and navigation.

The side rail: a vertical panel pinned to the left or right edge of the shell.

The footer status strip: a compact, monospace row of status items separated by flexible spacers.

A surface container that groups related content, with optional header and footer regions.

A titled content region: a header with a configurable heading and actions, a body, an optional footer, and an optional collapsible or scrollable form.

A hairline divider: horizontal or vertical, optionally with a centered label, in two weights.

A vertical flex column with a token-driven gap, the primitive for stacking content.

A horizontal flex row that wraps, for toolbars, tag lists, and inline action groups.

A two-dimensional CSS grid: fixed columns or responsive auto-fit, with a token-driven gap.

A page band or a framed stage: the full-width strips and demo grounds a page is built from.

The small uppercase kicker that sits above a heading.

A whole card that is a single link: the click target is the card, not a button inside it.

A draggable divider that resizes an adjacent pane, with configurable bounds and steps.

A clickable action: five variants across six semantic tones.

An on/off toggle that applies immediately, with an accessible name and optional state labels.

A styled native checkbox: checked, indeterminate, and disabled states.

A single-choice input: a styled native radio plus a group that manages roving focus and arrow-key navigation.

A draggable range control for choosing a single value between a min and max, with full keyboard support.

A single-select toggle bar: pick one of a few options from a connected button group.

A stack of collapsible sections, one or many open at a time, driven by pointer or keyboard.

A color chip pairing a colored dot with an optional label and value.

A labelled text input with helper text, validation, adornments, and built-in clear and reveal actions.

A styled native dropdown: .xoji-control chrome, a custom chevron, and a label, with valid and invalid states across three sizes.

A multi-line text input: styled, labelled, and resizable, in three sizes with an invalid state.

A label / description / error scaffold that wraps any slotted control and wires the accessibility plumbing.

An inline HSV color picker: a saturation/brightness field, a hue track with an opt-in alpha track, optional per-channel sliders for any model, and a switchable multi-format value field.

A numeric field with stepper buttons, bounds, and step snapping, driven by pointer or keyboard.

A text hyperlink: the anchor primitive, in three emphasis variants with an automatic external-link affordance.

Sectioned content switching with a full WAI-ARIA tablist: three visual treatments, keyboard-driven.

A hierarchy trail showing where a page sits, with linked ancestors and a marked current location.

A hierarchical, keyboard-navigable list of expandable nodes built from a data array.

An on-this-page table of contents that highlights the section currently in view.

A page navigator: previous/next controls around a windowed list of page numbers with ellipses.

An inline message banner with an optional severity glyph, a title, actions, and a dismissible form — color and meaning on independent axes.

An indeterminate loading indicator: a spinning ring in any of the six semantic tones, in three sizes.

A shimmering loading placeholder in four shapes: text, line, block, and circle.

A transient notification that announces itself and slips away — color and meaning on independent axes, in a live-region stack.

A determinate progress meter: a linear bar or a circular ring, across six semantic tones.

A hover/focus hint that floats a short description beside its trigger, on any of four sides.

A centered modal built on the native <dialog> element: scrim, focus trap, and Esc-to-close come for free.

A menu button: a trigger that opens an anchored popup list of actions.

A compact status or label chip: three fills across six semantic tones and twelve named hues.

A semantic section heading whose visual size is decoupled from its document level.

A body-text primitive: paragraph or inline span across four sizes, four weights, three leadings, and four tones.

An identity chip: a photo when one loads, a tinted initials-or-icon fallback when it doesn't.

A styled data table around native <table>: zebra, bordered, hover, sticky header, and a sortable-header affordance.

A single metric: a prominent value with its label, optional trend delta, and caption.

A keycap for the keys in a shortcut.

A read-only, syntax-highlighted code block themed entirely from the code-token family.