Seven-Segment Display
Numbers and clocks on segments you can see even when they're off.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/seven-segment.jsonUsage
import { SevenSegment } from "@/components/ui/seven-segment"
<SevenSegment value="12:45" colonBlink />Examples
Scoreboard
digits={2} pads scores with unlit digits so the layout never shifts.
Stopwatch
A point belongs to the digit before it, as on hardware, so 00:00.00 still has six digit cells.
Characters and options
Hex digits, a few extra letters, padding, skew={0} and a brighter unlit level.
API reference
Renders a <span role="img"> labelled with the value, holding two stacked SVGs: unlit glass and lit segments.
| Prop | Type | Default |
|---|---|---|
value | string0–9, A–F, minus, colon, dot and space, plus H, J, L, P, U, n, o, r, t, u and y. Unknown characters render as a blank digit. | None |
digits | numberPads on the left with unlit digits up to this count. Colons and dots don't count. | 0 |
size | "sm"Digit height: 32, 48 or 72px, or any pixel value. It sets --segment-h, so responsive classes like lg:[--segment-h:96px] work too. | "md" |
skew | numberForward lean in degrees. 0 stands the digits upright. | 8 |
unlit | numberOpacity of unlit segments, from 0 (invisible) to 1. | 0.08 |
colonBlink | booleanBlink colons once a second. Holds steady with reduced motion. | false |
color | NeonColorPalette name or hex. Falls back to --neon-accent, then cyan. | inherited |
Accessibility
- The display is role="img" labelled with the value as written. Pass aria-label for something more natural, like "12 minutes 48 seconds left".
- Decimal-point slots only appear when the value contains a point, so clocks and scores stay tight.
- Segments switch on in 50ms and fade out over 160ms, like phosphor. Both are instant with reduced motion.