EmptyState

Placeholder for an empty list, with a glyph and an action slot.

Installation

terminal
npm install @nqmcreative/ui
npx nqm-ui add empty-state --style matte

Import

barrel or subpath
import { EmptyState } from '@nqmcreative/ui/matte';
import EmptyState from '@nqmcreative/ui/matte/empty-state';

Usage

No projects yet

Create your first project to see it here.

esc
Accordion Wrapper that stacks collapsible items.
AccordionItem A single collapsible row, built on <details> so it works without JS.
Alert Inline message in any tone, optionally dismissible.
Avatar Image or initials, circular or squared, in five sizes.
AvatarGroup Overlapping row of avatars, each ringed in the background.
Badge Pill label for status and counts. Solid, soft or outline.
Breadcrumb Trail of links to the current page.
Button Five variants and four sizes, with a loading state and an href mode.
Calendar Month grid with keyboard navigation, bounds and disabled days.
Card Surface with an optional header and footer, in three variants.
Checkbox Single checkbox with a label, description and indeterminate state.
CheckboxGroup A set of checkboxes bound to a string array, with an optional cap.
ColorInput Hex field paired with the native swatch and fixed choices.
Combobox Single-select with a text filter and keyboard navigation.
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.
CTASection Closing call to action, in three variants.
CurrencyInput Amount field that groups on blur and binds a number.
DatePicker Text field plus a calendar popover. Value is a YYYY-MM-DD string.
Divider Rule, horizontal or vertical, with an optional caption.
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.
Dropzone Drag-and-drop file input with type, size and count validation.
EmptyState Placeholder for an empty list, with a glyph and an action slot.
FeatureCard One feature: glyph, heading, copy. Optionally a whole link.
FeatureGrid Section wrapper that lays feature cards out in 2, 3 or 4 columns.
Field Wraps any control with a label, hint and error message.
FileInput One-line file picker with type, size and count validation.
Footer Site footer with link columns and a bottom bar.
HeroSection Page opener — eyebrow, headline, copy, actions, optional media column.
Input Text field with prefix and suffix slots, sizes and an invalid state.
InputAddon Fixed label joined to an input inside an InputGroup.
InputGroup Joins an input to a button or addon with a single shared border.
Kbd Keyboard key.
Label Form label with an optional required marker.
Link Anchor in any tone, with an external variant.
LogoCloud Row of client or partner marks, dimmed until hovered.
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.
MultiSelect Multi-select with chips, grouping and a selection cap.
Navbar Top bar that collapses into a drawer below the md breakpoint.
Pagination Page numbers that collapse to an ellipsis around the current one.
PinInput One box per character, with paste spreading and arrow keys.
Popover Anchored panel that opens on click or hover.
PricingCard One plan: price, period, ticked feature list, optional featured styling.
Progress Determinate or indeterminate bar, in three sizes.
Radio Single radio bound to a shared group value.
RadioGroup A set of radios, optionally rendered as selectable cards.
SearchInput Search field with a clear button and a debounced callback.
SegmentedControl Exclusive choice as one joined row, with arrow-key movement.
Select Native select with a chevron and data-driven options.
Sidebar Nested, collapsible navigation rail for an app shell.
Skeleton Pulsing placeholder in text, block or circle form.
Slider Range input with ticks and a printed value.
Spinner Rotating ring that inherits the surrounding colour.
Stat Figure with a label, delta and trend arrow.
StatsBand A row of figures, built on Stat.
Steps Progress through a flow, horizontal or vertical, with a failed state.
Switch On/off toggle with a label and description.
Table Data-driven table with sorting, row selection and a cell snippet.
Tabs Underline, pill or segmented tabs bound to a value.
TagsInput Free-text tokens committed on Enter, deduplicated and capped.
Testimonial A quote with an attributed author.
Textarea Multi-line field that can grow with its content.
ThemeToggle Light, dark and system, remembered in localStorage.
TimeInput HH:MM field with steppers, bounds and a minute step.
Toaster Renders the toast queue. Mount once, near the root.
Tooltip CSS-only label on hover and focus, in four placements.