FeedbackAvailable
Listening Indicator
Decorative playback waveform that animates only while speech plays.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/listening-indicator.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
import { ListeningIndicator } from "@/components/ui/listening-indicator";
export default function Demo() {
return (
<div className="grid gap-4 sm:grid-cols-3">
{(["speaking", "idle", "unavailable"] as const).map((status) => (
<figure key={status} className="grid justify-items-center gap-2">
<ListeningIndicator status={status} />
<figcaption className="bl-type-small">{status}</figcaption>
</figure>
))}
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | AudioStatus | Required | Actual playback state supplied by the consumer. |
| reducedMotion | boolean | false | In-app preference; the system preference also stops the bars. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Decorative and hidden from assistive technology; announce playback with text elsewhere.
Never requests the microphone or measures volume.