Components

Category All components

97–111 of 111 components

Bounded meter

A measurement within a known range, such as storage used or a password score: label, value text and a bar on role="meter", toned by the HTML meter regions, with the track cut at its thresholds.
- Control
- No additional dependencies
Copyable value

One value such as an order number, API key or wallet address with a Copy button attached, a polite confirmation, middle truncation that never changes what is copied, and an optional mask with a Show toggle.
- Control
- No additional dependencies
Key-value display

Label and value pairs in a native description list, for order details, specs and account facts. Inline, stacked or grid layouts, optional hairline dividers, and an announced marker for missing values.
- Control
- No additional dependencies
Keyboard shortcut hint

A keyboard combination or sequence as nested kbd keycaps: Ctrl + K, ⌘K or G then I. One prop maps Mod to ⌘ or Ctrl, symbol keys carry spoken names, and it never listens for keys.
- Control
- No additional dependencies
Metric display

One headline number with its label, an optional unit, a signed comparison such as Up 12% vs last month, and a source footnote. Formats with an explicit locale; says direction in words, tones by whether it is good news.
- Control
- No additional dependencies
QR code display

Encodes a URL or text as an inline SVG QR code during render, on a white tile with a four-module quiet zone, and shows the destination beside it as a link or text, with an optional copy button.
- Control
- uqr ^0.1.3
Rich-text display

Renders a structured content tree (paragraphs, headings, lists, quotes, images, code and rules) through a fixed set of Svelte parts, with a bounded reading column, per-node snippet overrides and no HTML strings.
- Control
- No additional dependencies
Tag chip

A compact pill for a category, keyword or filter: static, linked, toggle or removable. The remove button is a sibling with its own name, and a toggle's plus turns into a check in place, so selecting never moves the row.
- Control
- No additional dependencies
Timestamp

Shows a supplied instant as an absolute date or a relative phrase such as 3 hours ago, inside a time element with an ISO datetime and the full date for screen readers. Server renders absolute; relative follows after mount.
- Control
- No additional dependencies
Bento grid

An asymmetric grid of feature cards with authored spans (1x1, 2x1, 1x2, 2x2) in three or four columns, media at the foot of each card, optional whole-card links and a one-column phone layout with its own order.
- Section
- No additional dependencies
Responsive grid

A CSS grid that fits as many columns as a minimum item width allows, or takes explicit counts per breakpoint. Works in sidebars through container queries and lines card parts up with subgrid.
- Control
- No additional dependencies
Vertical stack

A flex column that spaces its children from a six-step gap scale and aligns them on the cross axis. Replaces margins between siblings in card bodies, forms and lists, with list semantics kept on ul and ol.
- Control
- No additional dependencies
Inline cluster

A wrapping flex row for tags, buttons, links and meta items. Four gap presets tuned to what they hold, start/center/end/between justification and baseline alignment. No client JavaScript.
- Control
- No additional dependencies
Celebration burst

A brief confetti or sparkle burst that rises from the control that earned it, drawn on a temporary canvas and gone in 1.6 s by default. Pair it with a real text confirmation; it never replaces one.
- Control
- No additional dependencies
Checkbox

A native checkbox with a drawn box, a label, optional help text and an error, plus a dash for select-all rows. The box stays level with the label's first line however far it wraps.
- Control
- No additional dependencies