LCD

A small screen, as on a synth or a drum machine: the theme's foreground is its glass and its background the lit figures, so it reads as a screen in light and dark alike. It holds a reading, a ValueDisplay or a preset's name, under an optional caption. Its corners follow the style.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/lcd

Usage

Copy
import { Lcd } from "@/components/audio-ui/lcd";

<Lcd label="Preset" size="sm">
  012 Warm Pad
</Lcd>

For a value, put a Value Display in it, as the preview does: <ValueDisplay kind="hz" size="lg" value={cutoff} /> under the caption "Filter cutoff".

Give it live when its reading matters as it changes: a screen readers announce politely.

Together

A synth's panel, with the screen showing the value last touched: Power plays an arpeggio at the tempo, through the waveform, the filter's cutoff and resonance, the gain and the transpose, into the master fader.

API reference