A bottom bar with a key label, meta values split by hairlines and keyboard hints. Values tick up when they change.
npx shadcn@latest add https://hyperblur.dev/r/hud-status-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-status-bar.tsx.
import { HudStatusBar } from "@/components/hyperblur/hud-status-bar"
<HudStatusBar title="Night Grid" items={[{ label: "Stack", value: "Shader" }, { label: "Status", value: "Live" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Ion Drift" | Key label at the left. |
| code | string | "EXP 014" | Dim code after the title. Hidden on narrow widths. |
| items | { label: string; value: string }[] | Stack, Licence, Status, Added | Meta values. Extra items drop off as the bar gets narrower. |
| hints | { keys: string; label: string }[] | Browse, Search, Open | Keyboard hints at the right. Only the first stays on narrow widths. |
| accent | string | "#ff4d4d" | Key marker and tick-up flash color. |