Hud Label
The instrument-panel label: tiny, mono, uppercase, tracked wide enough to read as machine output rather than prose.
DisplayServer safeclass-variance-authority
Preview
01the channel
livelast build2m ago
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/hud-labelPulls in @duck/theme. Already installed items are skipped.
Usage
import { HudLabel } from "@/components/ui/hud-label"The file lands in components/ui/hud-label.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "muted" | "foreground" | "primary" | "muted" | Use primary for a live value, a section index or a status. |
| size | "sm" | "default" | "default" | 10px or 11px. Nothing larger — past that it stops reading as chrome. |
| tracking | "default" | "tight" | "default" | 0.3em, or 0.18em for labels boxed inside a control where the width would push the layout around. |
| dot | boolean | false | Lime status square before the text. Decorative — keep the state in the label's own words too. |
Rules
What keeps this component from turning into noise.
- Label, not sentence. Two or three words; the tracking makes anything longer unreadable.
- The uppercase is a text-transform, so pass normal-case content and let the component shout.