Mic toggle with animated waveform bars and pulse state.
npx shadcn@latest add https://refinery.abhii.me/r/waveform-bars.json| Name | Type | Description |
|---|---|---|
| color | string | Color class for the container and bars. Accepts any CSS color string. |
| iconSize | string | Size class for the microphone icon. |
| barCount | number | Number of bars in the waveform. Default is 7. |
| defaultOpen | boolean | Initial open state for uncontrolled usage. |
| open | boolean | Controlled open state. |
| onOpenChange | (open: boolean) => void | Callback fired when open state changes. |
Toggled state is used to drive the button position, scale, and background color with Motion. The waveform itself is a row of bars with staggered height animations that only loop while the control is active. You can adjust the bar count and color, or pair it with your own recording state through the controlled props.