Components
Core primitives — button, card, badge, status. Layout, form controls, overlays, data views, and full-screen examples live on their own pages.
More components
This page covers primitives only. Everything else has a canonical home.
Button
/components/button/Five variants, three sizes with fixed height per size — text and icon-only buttons align in the same row. Supports loading spinners, disabled state, and aria-label for icon-only. Primary is yellow; terminal carries the ❯ for technical actions.
ButtonProps| Prop | Type |
|---|---|
asChild? | boolean |
Button group
/components/button-group/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.
ButtonGroupProps| Prop | Type |
|---|---|
size? | ButtonGroupSize |
orientation? | ButtonGroupOrientation |
The default surface. Add an accent for a yellow-bordered, highlighted card.
CardProps| Prop | Type |
|---|---|
accent? | boolean |
density? | 'comfortable' | 'compact' |
Divider
/components/divider/A horizontal rule. Default uses the border token; accent variant draws a short yellow rule for section breaks.
Content above the divider
Content below the divider
Accent variant — short yellow rule
Badge & Pill
/components/badge-and-pill/Badges label status inline. Pills are tiny mono-flavored tags.
BadgeProps| Prop | Type |
|---|---|
variant? | keyof typeof badgeVariants |
Status & Kbd
/components/status-and-kbd/Status dots show liveness with a soft glow. Kbd renders shortcut chips.
Stat card
/components/stat-card/Compact metric tiles for dashboards, with optional trend.
StatCardProps| Prop | Type |
|---|---|
label | string |
value | string | number |
change? | { value: string; direction: 'up' | 'down' } |
accent? | boolean |
Active Sessions
12%42
CPU Load
4%63%
Storage
1.2 TB
Progress, Skeleton & Avatar
/components/progress-skeleton-and-avatar/Loading and identity primitives. Avatar and AvatarGroup stack naturally.
Tooltip
/components/tooltip/Appears on hover and focus. Supports top (default) and bottom placement.
Alert
/components/alert/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.
AlertProps| Prop | Type |
|---|---|
tone? | keyof typeof toneStyles |
title? | string |
icon? | React.ReactNode |
Heads up
Yellow signals an action worth noticing.
Scheduled
Maintenance window at 03:00 UTC. No action needed.
Deployed
emma — hermes v2.0 is live.
Connection failed
Could not resolve host — check DNS.
Storage full
Custom icon via the icon prop.
Spacing in apps
Wrap stacked alerts in <Stack gap="md"> or add className="mb-4". The demo above uses flex gap from the preview stage only.
Tabs & Accordion
/components/tabs-and-accordion/Organize content. Tabs ship pill and underline variants.
Timeline
/components/timeline/Vertical activity feed with status-colored dots and metadata.
Rolled out to emma
Config reloaded
emma refused connection
Panel
/components/panel/A card with a header bar: title, optional description, and optional actions. Pass a fragment with multiple buttons to actions for a toolbar.
Compose stack
hermes
Meter
/components/meter/A labeled progress row that turns red past a hot threshold (default 85%). Used for CPU/memory/disk and plan-usage limits.
Stepper
/components/stepper/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.
- 1Connect host
- 2Choose stacks
- 3Invite team
- 4Finish
- Connect host
- Choose stacks
- 3Invite team
- 4Finish
- Connect host
- Choose stacks
- Invite team
- 4Finish
Density
/components/density/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.
Padding tightens in compact mode.
TOTP at sign-in.
Always compact via prop.
Comfortable by default.
Empty state
/components/empty-state/For surfaces with no data, no results, or an error. Icon, headline, calm explanation, one clear action. Use compact inside cards, tables, and panels.
EmptyStateProps| Prop | Type |
|---|---|
icon? | EmptyStateIconName | ReactNode |
title? | ReactNode |
description? | ReactNode |
action? | ReactNode |
secondaryAction? | ReactNode |
compact? | boolean |
accent? | boolean |
Connect your first machine and Tia will start watching it within seconds.
No open alerts across your fleet. The last incident was acknowledged 6 days ago.
Nothing matches “grafna”. Check the spelling or clear the filter to see everything.
emma.tollerud.no refused the connection. The agent may be offline or the port blocked.
Code block
/components/code-block/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-agentContainer
/components/container/Layout width constraint — 1100px max with 24px horizontal padding. Use as a page wrapper or section cap.
Action row
/components/action-row/A single command-list row — icon, label, description and shortcut. Used inside CommandMenu-style surfaces.
Glow card
/components/glow-card/Wraps any surface with a cursor-tracking yellow glow. Intensity and color are configurable.