Pieces

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

7/10

Token Bucket

monitoring12

Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.

12428

Severity Stack

monitoring13

Single distribution bar splitting incident counts across critical, warning, and info segments with a mono legend.

R42 MB/s
W18 MB/s

Disk I/O

monitoring14

Two-line monospace block reporting read and write throughput with arrow glyphs for direction.

http.req
auth
db.query
cache.set

Trace Spans

monitoring15

Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.

api
42ms
db

Service Link

monitoring16

Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.

live

Pulse Wave

monitoring17

Bare ECG-style heartbeat trace with a pulsing live dot at the leading edge and no other chrome.

812

Queue Depth

monitoring18

Vertical battery of segments rendering current queue fill against capacity, with a stacked numeric ratio beside it.

100ms500ms

Range Marker

monitoring19

Horizontal scale that drops a marker on the current reading and tints the expected window behind it.

12.4%87.6%

Diff Bar

monitoring20

Two-tone success-versus-error split bar that prints the percentage of each side directly inside its segment.

Underline Tabs

nav4

Horizontal tabs with a thin bottom rail and a primary underline under the active label.

Pill Tabs

nav5

Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.

Enclosed Tabs

nav6

Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.

Vertical Tabs

nav7

Sidebar-style stack of icon + label rows where the active row gets a muted fill and bolder text.

Breadcrumb

nav8

Compact breadcrumb trail with chevron separators and the trailing crumb rendered in bold.

Icon Breadcrumb

nav9

Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.

Collapsed Breadcrumb

nav10

Breadcrumb that hides middle crumbs behind a dropdown chip so the trail stays on a single row.

Counted Tabs

nav11

Underline tabs that print a pill count next to the label, with the active count filled in primary.

Icon Tabs

nav12

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.

Path Breadcrumb

nav13

URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.

Workspace
Admin

Sidebar Nav

nav14

Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.

Pagination

nav15

Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.

Actions

Dropdown Menu

nav16

Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.

Context Menu

nav17

Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.

Command Trigger

nav18

Full-width button that fires a command palette, paired with a search icon and a ⌘K kbd hint.