Level Meter

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/level-meter

UsageCopy Anchor Link

import { LevelMeter } from "@/components/ui/level-meter";

<LevelMeter aria-label="Microphone level" peakDb={-12} />

With no children, LevelMeter renders one track per channel with a peak bar and a peak-hold tick. Add children to control the anatomy.

AnatomyCopy Anchor Link

<LevelMeter source={analyser.meter}>
  <LevelMeterChannels>
    <LevelMeterChannel index={0}>
      <LevelMeterTrack>
        <LevelMeterBar measure="rms" />
        <LevelMeterBar measure="peak" />
        <LevelMeterHold />
      </LevelMeterTrack>
    </LevelMeterChannel>
    <LevelMeterScale />
  </LevelMeterChannels>
  <LevelMeterValue />
  <LevelMeterClip />
</LevelMeter>

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

ValuesCopy Anchor Link

Pass peakDb (and optionally rmsDb) for data that arrives slowly. The meter still moves smoothly between updates.

VerticalCopy Anchor Link

VariantsCopy Anchor Link

Peak and RMSCopy Anchor Link

Layer an rms bar over a translucent peak bar for a dual meter.

BallisticsCopy Anchor Link

peak rises in 15 ms and falls steadily; vu is slow and averaged; instant follows the input exactly.

Colors and zonesCopy Anchor Link

Override the meter tokens with a class, or pass your own zones.

Build your own visualCopy Anchor Link

Each channel writes its live level to --meter-level (0..1). Anything inside a LevelMeterChannel can use it in CSS.

MicrophoneCopy Anchor Link

Feeding dataCopy Anchor Link

A meter accepts levels three ways. See Feeding data.

// A source: subscribes and paints itself, no React renders.
<LevelMeter source={analyser.meter} />

// Values: for slow data. Ballistics smooth the movement.
<LevelMeter peakDb={-9.1} rmsDb={-18} />

// A handle: for callers that own their own frame loop.
const meter = useRef<LevelMeterActions>(null);
meter.current?.paint({ channels: [{ peakDb: -9.1 }] });
<LevelMeter actionsRef={meter} />

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

• The root has role="meter" with aria-valuemin, aria-valuemax and aria-valuenow in dB, and aria-valuetext such as "−12.0 dB". These update at most four times a second.
• Give every meter a name with aria-label or aria-labelledby.
• With reduced motion, the meter shows the current level four times a second instead of animating.

API referenceCopy Anchor Link

LevelMeterCopy Anchor Link

LevelMeterChannelCopy Anchor Link

LevelMeterBarCopy Anchor Link

LevelMeterScale, LevelMeterValue, LevelMeterClipCopy Anchor Link

These wrap DbScale, DbReadout and ClipIndicator, and take their props. The range, orientation and data come from the meter.