feedback

Progress

Determinate or indeterminate bar, in three sizes.

import
import Progress from '@nqmcreative/ui/progress';

Preview

Storage 72%
Queue 38%
progress.svelte
<script lang="ts">
	import Progress from '$lib/components/Progress.svelte';
</script>

<div class="flex w-full max-w-sm flex-col gap-5">
	<Progress value={72} label="Storage" showValue />
	<Progress value={38} label="Queue" tone="accent" size="lg" showValue />
</div>
Imports

Shared modules

  • tones

Source: src/lib/components/Progress.svelte

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.