Search
Search
Components
51 accessible Svelte 5 primitives, each rendered live on demo data. Open any card to inspect the full typed API.
Actions
Button
A polymorphic action with five visual variants, four sizes, loading, disabled, icon, link, and button states.
Status
Badge
Compact categorical metadata with neutral and semantic tones, optionally led by a status dot.
neutralinfosuccesswarningdangeraccent
Forms
Field
A stable label, description, error, and control composition for form inputs.
Alert when the value exceeds this limit.
Feedback
Skeleton
Reduced-motion-aware placeholders for lines, blocks, circles, and table rows.
Feedback
Empty state
A teaching empty state with icon, explanation, and primary or secondary actions.
No invoices
Invoices appear here once a customer is billed.
Overlays
Tooltip
A concise hover and focus explanation positioned above or below its trigger.
Overlays
Popover
A caller-controlled anchored panel for compact menus and settings.
Navigation
Tabs
A typed tab list with caller-provided Svelte snippets.
Overview content with caller-owned markup.
Feedback
Toast
A compact semantic notification with optional dismissal.
Configuration saved
The live dashboard is using the new thresholds.
Connection delayed
Overlays
Modal
A focus-trapped modal with Escape, backdrop dismissal, focus restoration, sizes, and footer composition.
Navigation
Pager
Previous and next pagination with current position and optional total.
Navigation
Breadcrumb
A semantic path with links, callback steps, muted labels, and a current-page marker.
Forms
Toggle
A compact boolean control with checked motion and disabled state.
Rule enabled
Visual
Icon
The typed inline SVG vocabulary shared by every component and widget in the library.
gaugeactivityservertabletreebell
A labelled icon is announced as “Server”; the swatches above are decorative.
Actions
Button group
A segmented toolbar wrapper that fuses adjacent buttons into one control with shared hairline borders.
Motion
Number ticker
An animated count-up number that eases between values with tabular figures and Intl formatting.
4,280
Data
Data table
A sortable, filterable table: per-column funnel filters (text, set, number, date), snippet cell renderers, sticky header, pagination, responsive card mode, and keyboard-activatable rows.
| Requests | 428.6 |
| Response time | 82.1 |
Forms
Select
A single-value combobox with grouped options, search, keyboard cursor, clear, and optional create-from-query.
Forms
Combobox
A multi-select input with chips, keyboard cursor, backspace-to-remove, selection limits, and async lookup hooks.
ana@example.com
Actions
Dropdown menu
An ARIA menu with roving focus, separators, danger items, and a trigger snippet that spreads onto your own button.
Forms
Text input
A text input with prefix/suffix snippets, sizes, and an invalid state.
Forms
Textarea
A textarea with optional auto-grow and the same states as TextInput.
Forms
Checkbox
A real checkbox input with an animated draw-in checkmark, indeterminate state, and label.
Forms
Radio group
Native radios styled as a group, with optional per-option descriptions.
Forms
Slider
A styled native range input with a filled track and live value readout.
Navigation
Sidebar rail
An icon-only navigation rail: one selection marker slides between destinations, with flyout labels, badges, a live-status orb and brand/footer slots.
Forms
Tree select
A hierarchy picker: flat { id, parentId } nodes rendered as an expandable tree in a floating panel.
Feedback
Toaster
A stacked notification queue: newest first, capped depth, auto-dismiss timers, and four corner positions.
Forms
Range calendar
A two-click date-range grid with hover preview, a continuous selection track, and full keyboard roaming. Calendar-date math only — no timezone drift, no date library.
June 2026
July 2026
2026-06-08 → 2026-06-17
Forms
Date range picker
The range calendar plus an optional wall-clock row. Emits the same strings as a native date or datetime-local input, so it swaps 1:1 for a two-field pair.
June 2026
2026-06-08T08:00 → 2026-06-17T20:00
Overlays
Range popover
The chrome around a range selection: a trigger, a two-column floating panel with an absolute-range snippet beside quick presets, hover or click opening, and measured placement.
Preset: 24h
Forms
Search field
The toolbar search input: leading glyph, accent focus ring, and a clear button that restores focus and re-reports the empty query.
4 of 4 services
Overlays
Confirm dialog
The destructive-confirmation modal: a sentence naming what will be deleted, an optional consequence note and error banner, and a confirm button that blocks cancelling while the request is in flight.
Actions
Toolbar menu
A kebab menu that collapses secondary toolbar actions behind one trigger. Items self-register, so a menu whose entries are all permission-gated renders nothing at all.
No action yet
Actions
Row actions menu
One ellipsis trigger per table row listing every action by name, with hover intent, a danger separator, and busy and flash states for work that outlives the closed menu.
| Unit | ||
|---|---|---|
| Requests | /s | |
| Response time | ms | |
| CPU load | % |
Open a row menu — only one stays open
Overlays
Sheet
A dialog that becomes a sheet on phones — full-screen for forms, or a bottom dock for confirms — with the header and footer pinned while the body scrolls between them.
Narrow the window below 480px to see the phone presentation.
Navigation
Bottom nav
The phone tab bar: a frosted floating pill whose selection marker slides between destinations. The third nav mode beside the desktop rail and the top navbar.
Layout
Card
A bordered surface with optional header and footer bands, divided by hairlines and inset by a single padding switch.
api-gateway
Deployed 14 minutes ago from the release branch.
Owner: ana@example.com
Layout
Separator
A hairline rule between groups of content, horizontal or vertical, optionally captioned in the middle.
Projects Invoices
or
Everything archived last quarterFeedback
Alert
An inline notice in four tones with an optional icon, title, body, and trailing action slot.
Quota almost reached
api-gateway is at 92% of its monthly request quota.
Scheduled maintenance
api-gateway will be read-only on Sunday from 01:00 to 02:00 UTC.
Invoice sent
Invoice INV-2032 was emailed to ana@example.com.
Deployment failed
The release branch did not build.
Forms
Label
A form label bound to a control by id, with an optional required marker that is announced as words rather than an asterisk.
Feedback
Spinner
A sized indeterminate ring that inherits the current text colour, announces its label once, and holds still under reduced motion.
Loading Loading invoices Loading
The label is announced once; the ring holds still under reduced motion.
Feedback
Progress
A determinate or indeterminate bar with an optional caption and percentage readout, clamping any value into 0…max.
Data display
Avatar
A circular portrait that falls back to initials when there is no source, or when the image fails to load.
BO CL The first has a photo; the rest fall back to initials. The last has an empty alt, for use beside text that already names the person.
Data display
Kbd
A keycap, or a nested run of caps for a shortcut, rendered in the monospace token with a pressed-key inset.
⌘ K ⌃ ⇧ P Esc
Press ⌘ K to search, or Esc to dismiss.
Disclosure
Accordion
Stacked disclosure sections that keep at most one open, or any number, with headers at the heading level you choose and arrow-key roaming between them.
Project name, description, and the branch new environments deploy from.
Invite teammates, assign roles, and review who has access to production.
Plan, seats, and invoices. Invoices are emailed on the first of each month.
Nothing archived yet.
Disclosure
Collapsible
A single show/hide disclosure — the primitive behind an accordion item, without the sibling coordination.
Requests to api-gateway are retried three times before the deploy rolls back.
Nothing archived yet.
Overlays
Hover card
A rich preview that opens once the pointer rests on a trigger, with a grace period for crossing onto the card and no focus trapping.
Assigned to — rest the pointer on the name, or tab to it.
Overlays
Context menu
A right-click menu for a region, opening at the pointer with icons, separators, and danger rows — and reachable from the keyboard through the Menu key.
Invoice INV-2032
Right-click the card, or focus it and press the Menu key
Layout
Scroll area
A native scroll container with the library’s thin scrollbar and edge fades that appear only while content is hidden past an edge.
Forms
Toggle group
A segmented control that is a radio group in single mode and a set of independent toggle buttons in multiple mode.
Showing the bar view