Navigation

Components

57 components, each importable on its own subpath.

layout & navigation

Accordion Wrapper that stacks collapsible items with hairlines between them. @nqmcreative/ui/accordionAccordionItem A single collapsible row, built on <details> so it works without JS. @nqmcreative/ui/accordion-itemBreadcrumb Trail of links to the current page. @nqmcreative/ui/breadcrumbDivider Hairline rule, horizontal or vertical, with an optional caption. @nqmcreative/ui/dividerPagination Page numbers that collapse to an ellipsis around the current one. @nqmcreative/ui/paginationSteps Progress through a flow, horizontal or vertical, with a failed state. @nqmcreative/ui/stepsTabs Underline, pill or segmented tabs bound to a value. @nqmcreative/ui/tabs

feedback

Alert Inline message in any tone, optionally dismissible. @nqmcreative/ui/alertEmptyState Placeholder for an empty list, with a glyph and an action slot. @nqmcreative/ui/empty-stateProgress Determinate or indeterminate bar, in three sizes. @nqmcreative/ui/progressSkeleton Pulsing placeholder in text, block or circle form. @nqmcreative/ui/skeletonSpinner Rotating ring that inherits the surrounding colour. @nqmcreative/ui/spinnerToaster Renders the toast queue. Mount once, near the root. @nqmcreative/ui/toaster

data display

Avatar Image or initials, circular or squared, in five sizes. @nqmcreative/ui/avatarAvatarGroup Overlapping row of avatars with a ring cut out of the background. @nqmcreative/ui/avatar-groupBadge Pill label for status and counts. Solid, soft or outline. @nqmcreative/ui/badgeCard Bordered, filled or tinted surface with an optional header and footer. @nqmcreative/ui/cardKbd Keyboard key, styled with a thicker bottom edge. @nqmcreative/ui/kbdStat Figure with a label, delta and trend arrow. @nqmcreative/ui/statTable Data-driven table with sorting, row selection and a cell snippet. @nqmcreative/ui/table

actions

Button Five variants and four sizes, with a loading state and an href mode. @nqmcreative/ui/buttonLink Anchor in any tone, with an external variant. @nqmcreative/ui/link

forms

Calendar Month grid with keyboard navigation, bounds and disabled days. @nqmcreative/ui/calendarCheckbox Single checkbox with a label, description and indeterminate state. @nqmcreative/ui/checkboxCheckboxGroup A set of checkboxes bound to a string array, with an optional cap. @nqmcreative/ui/checkbox-groupCombobox Single-select with a text filter and keyboard navigation. @nqmcreative/ui/comboboxDatePicker Text field plus a calendar popover. Value is a YYYY-MM-DD string. @nqmcreative/ui/date-pickerDropzone Drag-and-drop file input with type, size and count validation. @nqmcreative/ui/dropzoneField Wraps any control with a label, hint and error message. @nqmcreative/ui/fieldInput Text field with prefix and suffix slots, sizes and an invalid state. @nqmcreative/ui/inputInputGroup Joins an input to a button or addon with a single shared border. @nqmcreative/ui/input-groupLabel Form label with an optional required marker. @nqmcreative/ui/labelMultiSelect Multi-select with chips, grouping and a selection cap. @nqmcreative/ui/multi-selectNumberInput Number field with steppers, clamping and decimal handling. @nqmcreative/ui/number-inputPasswordInput Password field with a visibility toggle and a strength meter. @nqmcreative/ui/password-inputRadio Single radio bound to a shared group value. @nqmcreative/ui/radioRadioGroup A set of radios, optionally rendered as selectable cards. @nqmcreative/ui/radio-groupSegmentedControl Exclusive choice as one joined row, with arrow-key movement. @nqmcreative/ui/segmented-controlSelect Native select with a chevron and data-driven options. @nqmcreative/ui/selectSlider Range input with ticks, a value bubble and dual-handle mode. @nqmcreative/ui/sliderSwitch On/off toggle with a label and description. @nqmcreative/ui/switchTextarea Multi-line field that can grow with its content. @nqmcreative/ui/textarea

overlay

CommandPalette Cmd+K launcher with grouping, shortcuts and hidden keywords. @nqmcreative/ui/command-paletteConfirmDialog Small dialog that stays busy until an async confirm settles. @nqmcreative/ui/confirm-dialogContextMenu Right-click menu placed at the pointer, flipped near the edges. @nqmcreative/ui/context-menuDrawer Panel that slides in from any edge, on the native dialog top layer. @nqmcreative/ui/drawerDropdown Menu anchored to a trigger, with focus trap and viewport flipping. @nqmcreative/ui/dropdownMenuItem Row inside a Dropdown or ContextMenu, with a shortcut hint. @nqmcreative/ui/menu-itemMenuSeparator Rule between menu groups, with an optional caption. @nqmcreative/ui/menu-separatorModal Centred dialog on the native top layer, with a footer slot. @nqmcreative/ui/modalPopover Anchored panel that opens on click or hover. @nqmcreative/ui/popoverThemeToggle Light, dark and system, remembered in localStorage. @nqmcreative/ui/theme-toggleTooltip CSS-only label on hover and focus, in four placements. @nqmcreative/ui/tooltip

app shell

Footer Site footer with link columns and a bottom bar. @nqmcreative/ui/footerNavbar Top bar that collapses into a drawer below the md breakpoint. @nqmcreative/ui/navbarSidebar Nested, collapsible navigation rail for an app shell. @nqmcreative/ui/sidebar

locale

LocaleProvider Scopes a locale to a subtree — the SSR-safe way to translate. @nqmcreative/ui/locale-provider
esc

layout & navigation

Accordion Wrapper that stacks collapsible items with hairlines between them.
AccordionItem A single collapsible row, built on <details> so it works without JS.
Breadcrumb Trail of links to the current page.
Divider Hairline rule, horizontal or vertical, with an optional caption.
Pagination Page numbers that collapse to an ellipsis around the current one.
Steps Progress through a flow, horizontal or vertical, with a failed state.
Tabs Underline, pill or segmented tabs bound to a value.

feedback

Alert Inline message in any tone, optionally dismissible.
EmptyState Placeholder for an empty list, with a glyph and an action slot.
Progress Determinate or indeterminate bar, in three sizes.
Skeleton Pulsing placeholder in text, block or circle form.
Spinner Rotating ring that inherits the surrounding colour.
Toaster Renders the toast queue. Mount once, near the root.

data display

Avatar Image or initials, circular or squared, in five sizes.
AvatarGroup Overlapping row of avatars with a ring cut out of the background.
Badge Pill label for status and counts. Solid, soft or outline.
Card Bordered, filled or tinted surface with an optional header and footer.
Kbd Keyboard key, styled with a thicker bottom edge.
Stat Figure with a label, delta and trend arrow.
Table Data-driven table with sorting, row selection and a cell snippet.

actions

Button Five variants and four sizes, with a loading state and an href mode.
Link Anchor in any tone, with an external variant.

forms

Calendar Month grid with keyboard navigation, bounds and disabled days.
Checkbox Single checkbox with a label, description and indeterminate state.
CheckboxGroup A set of checkboxes bound to a string array, with an optional cap.
Combobox Single-select with a text filter and keyboard navigation.
DatePicker Text field plus a calendar popover. Value is a YYYY-MM-DD string.
Dropzone Drag-and-drop file input with type, size and count validation.
Field Wraps any control with a label, hint and error message.
Input Text field with prefix and suffix slots, sizes and an invalid state.
InputGroup Joins an input to a button or addon with a single shared border.
Label Form label with an optional required marker.
MultiSelect Multi-select with chips, grouping and a selection cap.
NumberInput Number field with steppers, clamping and decimal handling.
PasswordInput Password field with a visibility toggle and a strength meter.
Radio Single radio bound to a shared group value.
RadioGroup A set of radios, optionally rendered as selectable cards.
SegmentedControl Exclusive choice as one joined row, with arrow-key movement.
Select Native select with a chevron and data-driven options.
Slider Range input with ticks, a value bubble and dual-handle mode.
Switch On/off toggle with a label and description.
Textarea Multi-line field that can grow with its content.

overlay

CommandPalette Cmd+K launcher with grouping, shortcuts and hidden keywords.
ConfirmDialog Small dialog that stays busy until an async confirm settles.
ContextMenu Right-click menu placed at the pointer, flipped near the edges.
Drawer Panel that slides in from any edge, on the native dialog top layer.
Dropdown Menu anchored to a trigger, with focus trap and viewport flipping.
MenuItem Row inside a Dropdown or ContextMenu, with a shortcut hint.
MenuSeparator Rule between menu groups, with an optional caption.
Modal Centred dialog on the native top layer, with a footer slot.
Popover Anchored panel that opens on click or hover.
ThemeToggle Light, dark and system, remembered in localStorage.
Tooltip CSS-only label on hover and focus, in four placements.

app shell

Footer Site footer with link columns and a bottom bar.
Navbar Top bar that collapses into a drawer below the md breakpoint.
Sidebar Nested, collapsible navigation rail for an app shell.

locale

LocaleProvider Scopes a locale to a subtree — the SSR-safe way to translate.