audiocnBar Visualizer
A row of bars driven by frequency bands, with idle, loading and mirrored modes.
Installation
$ pnpm dlx shadcn@latest add @audiocn/bar-visualizerUsage
import { BarVisualizer } from "@/components/ui/bar-visualizer";<BarVisualizer aria-label="Voice activity" source={analyser.visual} />Bars take their color from the text color, so set it with a class such as text-primary. Bars paint on the animation frame without re-rendering React.
Examples
Alignment
center
end
start
Idle and loading
idle decides what bars do without a signal. loading runs a sweep, for connecting or thinking states.
idle pulse
idle wave
loading
Mirrored
Inside a badge
Live
Theming
| Variable or attribute | Meaning |
|---|---|
--bar-width | Maximum bar width, default 0.375rem |
--bar-gap | Gap between bars, default 0.1875rem |
--bar-radius | Bar corner radius, default fully rounded |
data-loading | The sweep is running |
data-index | On each bar, its position |
Accessibility
The root has role="img" and the label "Audio visualizer". Pass aria-label to describe what it shows, or aria-hidden when it is decorative next to a labelled meter.
API reference
Prop
Type