Segment display Pro

A seven-segment readout. Unlit segments stay faintly visible behind the glass. On LED, a segment lights at once and fades out with an afterglow. On LCD, the crystal is slow both ways and leaves a ghost.

Pro preview

Installation

Terminalbash
npx @neelshha/ui@latest login
npx @neelshha/ui@latest add segment-display

Usage

page.tsxtsx
import { SegmentDisplay } from "@/components/ui/segment-display";

<SegmentDisplay value="12:45" blink />

LCD

Dark crystal on a grey-green reflector, with the faint shadow a real segment casts.

Pro preview
page.tsxtsx
<SegmentDisplay value="12:45:09" variant="lcd" blink />

Tones and fixed digits

digits fixes the cell count so the value right-aligns and the width holds still.

Pro previewPro previewPro preview
page.tsxtsx
<SegmentDisplay value={String(count)} digits={3} tone="success" />
<SegmentDisplay value="-12.5" tone="error" />
<SegmentDisplay value="HELLO" />

Source

API

Other props go to the outer span. Screen readers get the value as text. It is a server component: no JavaScript ships for it.

PropTypeDefaultDescription
valuestringDigits, most letters, - _ = ° and : . A decimal point joins the digit before it.
digitsnumberDigit cells. A shorter value right-aligns, like a calculator.
variant"led" | "lcd""led"LED glows on dark glass. LCD is dark ink on a grey-green reflector.
tone"sky" | "success" | "error""sky"LED color.
blinkbooleanfalseBlinks the colons once a second. Holds still with reduced motion.