Status Chip
status-chipViewersFive states a face can tell apart, including the two that matter.
$ pnpm dlx shadcn@latest add @pluginui/core-status-chipInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-status-chip.jsonUsage
Connect the documented props to your application or host.
import { StatusChip, StatusChipGroup } from "@/components/ui/status-chip"
<StatusChipGroup>
<StatusChip label="Audition" state={auditioning ? "lit" : "off"} />
<StatusChip label="Host sync" state={hostTempo ? "lit" : "off"} detail="128 BPM" />
{/* Not "off" - this host publishes no tap at all. */}
<StatusChip
label="Output tap"
state={hasTap ? "live" : "dim"}
title={hasTap ? undefined : "This host publishes no output tap"}
/>
<StatusChip label="Source" state="warn" detail="Internal (fallback)" />
</StatusChipGroup>About Status Chip
A small LED chip can show states such as AUDITION lit, HOST SYNC off, LIVE, or no tap from this host. It exists because useful states are not just on or off. The key distinction is between off and dim: off means the facility is available but not engaged, so its label stays readable while only the lamp goes dark; dim means the facility is unavailable in this host, so the whole chip recedes. Showing “no telemetry from this host” the same way as “telemetry switched off” would misrepresent the session. The five appearances therefore come from a pure table, and a test keeps them distinct. Warn is a second kind of on, not a brighter one: the facility is engaged, but not in the requested state, such as a fallback source or a value past its budget. Live is the only state that animates, because a pulse means data is arriving now. The chip is presentational and stateless; the host chooses the true state. data-status-chip and data-state let a face's render test assert on that state without matching copy.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Facility name. Keep it short because this chip is a label, not a sentence. |
| state | "off" | "dim" | "lit" | "warn" | "live" | — | off = present, not engaged (label readable, lamp dark). dim = unavailable in this host (whole chip recedes). lit = engaged. warn = engaged but not as asked, on the second accent. live = engaged and receiving; the only state that pulses. |
| detail | ReactNode | — | Value or qualifier after the label, shown in muted monospace, such as a tempo or resolved source name. |
| title | string | — | Native tooltip. The place for the full why behind a dim or warn state. |
| color | string | — | Override the lamp colour for one chip. Otherwise the state picks --uikit-accent, --uikit-accent-2 or the muted text colour. |
| compact | boolean | false | Tighter type and padding, for a crowded bottom rail. |
| StatusChipGroup | { children, gap?, wrap? } | — | A row of chips on one baseline, with a gap and an option to wrap. It is intentionally simple, giving a status rail one element and one hook instead of a bare div styled differently by each face. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.