React Status Indicator

LED-style state indicators in the language of equipment front panels and status pages: a colored (optionally pulsing) LED, an uppercase state label, and a monospaced detail line. Includes a StatusBoard panel that lists subsystem states the way a fab or service status page does. State is always carried by the label as well as the color.

Operationaluptime 99.98%
Degradedqueue depth 214
FaultE-4012 overtemp
Maintenanceuntil 14:00 UTC
Offline
Fab 2 — Subsystems
  • Lithography cluster
    operational24/24 tools
  • Etch bay
    degraded1 chamber down
  • Metrology
    operationalqueue 12 min
  • Wet bench line
    maintenancePM until 14:00
  • Ion implanter B
    faultE-4012 overtemp

Installation

npx shadcn@latest add status-indicator.json

Usage

Loading...

Props

StatusIndicator

PropTypeDefaultDescription
status'operational' \'degraded' \'fault' \
labelstring—Uppercase state label
detailstring—Monospaced secondary line
pulsebooleantrue when operationalAnimate the LED
size'sm' \'md''md'

StatusBoard

PropTypeDefaultDescription
titlestring—Panel header
itemsStatusBoardItem[]—{ name, status, detail? } per row