Components•HUD status
Components•HUD status
HUD status
A compact status readout for system health. Each row carries a live state dot (green ok, amber waiting, red fault) and mono values. The single pill is still available as a variant.
Dependencies
Motionnext-themes
Copy below cli
npx shadcn add @bjork-ui/hud-statusHow to use
import { StatusPanel } from "@/components/bjork-ui/hud/status";export function Demo() { return ( <StatusPanel rows={[ { label: "System", value: "NOMINAL", state: "ok" }, { label: "Link", value: "14 MS", state: "ok" }, { label: "Power", value: "82%", state: "ok" }, { label: "Sync", value: "PENDING", state: "waiting" }, ]} /> );}
System statusWaiting
- SystemNOMINAL
- Link14 MS
- Power82%
- SyncPENDING
Options
View
Link