audiocndB Readout
A numeric level label that updates at a readable rate and never shifts the layout.
Peak−∞ dBRMS−∞ dBPeak, held 1 s−∞ dBValue−6.0 dB
Installation
$ pnpm dlx shadcn@latest add @audiocn/db-readoutUsage
import { DbReadout } from "@/components/ui/db-readout";<DbReadout source={analyser.meter} />With a source, the readout updates its own text four times a second without re-rendering React. Its width is reserved for the longest value, so the text never pushes neighbouring elements around.
Examples
Color by zone
The readout sets data-zone and data-silent, so it can change color with plain Tailwind classes.
−∞ dB
Theming
| Data attribute | Meaning |
|---|---|
data-zone | ok, warn or clip |
data-silent | The level is at or below floorDb |
API reference
Prop
Type