Components

This page covers primitives only. Everything else has a canonical home.

Nine variants, three sizes with fixed height per size — text and icon-only buttons align in the same row. Primary and terminal support a pointer-following glow when you call initButtonGlow() once at the app root (see Foundations → Motion). Terminal carries the ❯ prefix for technical actions. Ghost semantic variants (ghost-destructive, ghost-success, ghost-warning, ghost-info) stay muted at rest and tint on hover — use in dense toolbars and ButtonGroups.

Fused action buttons for independent clicks — not a toggle. Wrap text or icon-only Button children; the group shares borders and height. Use Segmented when one option should stay selected.

Single-select toggle for views, sort modes, or filters. Pass collapseMobile to show only the active option on narrow viewports — tap to open a dropdown overlay, select to collapse.

The default surface. accent={true} adds a yellow border tint. accent='filled' adds a yellow border + subtle yellow fill. Optional CardHeader / CardContent / CardFooter compound parts. CardHeader accepts an actions slot — use CardChange for StatCard-style up/down deltas. Each of CardHeader/CardContent/CardFooter also takes its own accent to override the parent Card's accent for just that region.

Compact price display: a primary value with an optional secondary Badge below it. Use highlight='cheapest' for success coloring. size='sm' | 'md' | 'lg' scales the block for table cells or prominent rows. Defaults to right-aligned.

Hover card shell for list and grid items. Pass href to render as a link. Use highlight='cheapest' for a yellow border tint on the best-value item. Children are fully consumer-controlled — compose with Cluster or Split for left/right layouts.

Two-column marketing block with a text column and a consumer-controlled visual slot. Eyebrow matches PageHeader — mono uppercase yellow. Pass shimmer='word' to give one word in the title a shimmer accent. Collapses to single-column on mobile with text always first. background='raised' goes edge-to-edge with contentWidth capping the inner content.

A horizontal rule. Default uses the border token; accent variant draws a short yellow rule for section breaks.

Badges label status inline. Pills are tiny mono-flavored tags.

Status dots show liveness with a soft glow. Kbd renders shortcut chips.

Compact metric tiles for dashboards, with optional trend. tone colors the value + border independently of accent — for a status-carrying figure.

Loading and identity primitives. Avatar and AvatarGroup stack naturally.

Appears on hover and focus. Supports top (default) and bottom placement.

Four semantic tones. Pass icon to override the default icon per tone. Alert has no built-in outer margin — stack with Stack or className in apps.

Organize content. Tabs ship pill and underline variants.

Vertical activity feed with status-colored dots and metadata. variant='flat' (v4.16.0) drops the connector line for a divided activity/audit-log list, and title accepts rich content.

Plain static table primitives — no sorting, filtering, search, or pagination. Use DataTable for that; use Table for a fixed comparison table or small dataset.

A card with a header bar: title, optional description, and optional actions. Pass a fragment with multiple buttons to actions for a toolbar.

A labeled progress row that turns red past a hot threshold (default 85%). Used for CPU/memory/disk and plan-usage limits.

Horizontal step indicator for wizards and multi-stage flows. Pass an array of step labels and the current step index (0-based). Completed steps fill yellow; the active step carries a ring.

Two ways to apply compact density: set density='compact' directly on a Card, or wrap a group with data-density='compact' to tighten everything inside.

For surfaces with no data, no results, or an error. Icon, headline, calm explanation, one clear action. Use compact inside cards, tables, and panels.

Terminal-style code display with an optional copy button. Use the code prop for a single string, or children for richer markup.

systemctl status tollerud-agent

Layout width constraint — 1100px max with 24px horizontal padding. Use as a page wrapper or section cap.

A single command-list row — icon, label, description and shortcut. Used inside CommandMenu-style surfaces.

Wraps any surface with a cursor-tracking yellow glow. Intensity and color are configurable.