LCD Display

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn-solid/lcd-display

UsageCopy Anchor Link

import {
  LcdDisplay,
  LcdDisplayLabel,
  LcdDisplayRow,
  LcdDisplayValue,
} from "@/components/ui/lcd-display";

<LcdDisplay>
  <LcdDisplayRow>
    <LcdDisplayLabel>Tempo</LcdDisplayLabel>
    <LcdDisplayValue>128.0</LcdDisplayValue>
  </LcdDisplayRow>
</LcdDisplay>

The ink follows your theme's --primary. In light mode the display is backlit with dark pixels; in dark mode its ink glows on dark glass. Set appearance="light" or "dark" to keep one look across themes. Values briefly dim when their text changes.

AnatomyCopy Anchor Link

<LcdDisplay>
  <LcdDisplayRow>
    <LcdDisplayLabel />
    <LcdDisplaySelect items={items} value={value} onValueChange={setValue}>
      <LcdDisplaySelectTrigger />
      <LcdDisplaySelectContent />
    </LcdDisplaySelect>
  </LcdDisplayRow>
  <LcdDisplaySeparator />
  <LcdDisplayStatus />
</LcdDisplay>

LcdDisplaySelect uses the local Kobalte Select, not Base UI. It accepts an items array of { value, label, disabled? } objects. Kobalte renders these options from items inside LcdDisplaySelectContent; there is no per-option JSX child API. A controlled value={null} leaves the selection empty. The select also supports defaultValue, onValueChange, and disabled.

The popup defaults to placement="bottom-end" and gutter={8}. Set placement or gutter on LcdDisplaySelect to adjust its position. Kobalte uses a combined placement value rather than Base UI's separate side, align, and offset props.

ExamplesCopy Anchor Link

InksCopy Anchor Link

The primary variant follows --primary. Fixed variants are amber, green, cyan and red.

Override the ink with [--lcd-display-ink:var(--chart-1)]. The glass, pixels and glow derive from that variable. The portalled popup copies the display's shared variables when it opens.

Dot-matrix fontCopy Anchor Link

The text is masked into dots by default. For a real dot-matrix face, use the docs-only Doto font and disable the mask with matrix={false}.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The display has role="group". Each select trigger is labelled by its row's LcdDisplayLabel, including custom label IDs. Set live on LcdDisplayValue to announce changes politely. The status pixel is hidden from assistive technology.

API referenceCopy Anchor Link

LcdDisplayCopy Anchor Link

LcdDisplayValueCopy Anchor Link

LcdDisplayStatusCopy Anchor Link

LcdDisplaySelectTriggerCopy Anchor Link

placeholder is displayed when no option is selected. Children replace the selected value or placeholder text.

LcdDisplaySelectCopy Anchor Link