Listening bar & popup

ListeningBar · ListeningPopup@listenssoft/speechui-react

Choose between a listening bar at the top of the page, or a compact floating popup. Both show the live transcript and a waveform that pulses to the engine's audio level.

ListeningBar

A full-width strip pinned to the top of the page, with the wave and the transcript.

ListeningPopup

A compact capsule that floats over the page and widens to fit the transcript.

Try it

The bar is at the top of the page. Hold anywhere and watch the wave pulse as you speak. Tick the props to change it.

The bar is fixed at top: 0, so a header that is also fixed or sticky at top: 0 ends up underneath it. Set the header’s top to var(--listens-bar-height, 0px) instead. The bar publishes its current height in that variable, and 0px while it is hidden.

Loading the React kit…

React

Updates as you tick props

import { ListeningBar } from "@listenssoft/speechui-react";
// The bar reads the engine, so hold anywhere and it pins to the top of this// viewport with the wave and your transcript.function Demo() {  return (    <ListeningBar alwaysShow />  );}

API reference

React props for @listenssoft/speechui-react.

ListeningBar props

Prop	Type	Default	Description
`waveColor`	`string`	`"#ff0000"`	Stroke color of the waveform. A JS prop rather than a CSS token, so it can be set per bar.
`alwaysShow`	`boolean`	`true`	Keep the bar visible when idle (static line, no wave). Set false to slide it away between utterances.
`maxWidth`	`number \| string`	—	Constrain the bar's width and center it horizontally (e.g. 640 or "42rem").
`priority`	`number`	`0`	The most recently mounted popup or bar will be shown. Set the priority to change this.

ListeningBar extra props

Prop	Type	Default	Description
`className`	`string`	—	Extra class name(s) on the container.

Styling hooks

CSS hooks

Hook	Type	Default	Description
`.listens-listening-bar`	`class`	—	The fixed bar. Its stylesheet is self-contained (frosted light/dark backgrounds with backdrop blur) and is injected even in headless mode — fixed chrome can't be unstyled without collapsing.
`waveColor prop`	`prop`	—	The one visual knob that isn't CSS: the wave stroke color.
`--listens-bar-height`	`token`	—	Published height variable — offset your own fixed chrome by it when the bar is visible.

Behavior notes

All frameworks: It is recommended to add a ListeningBar or ListeningPopup to your app to make the Listens experience more intuitive.
All frameworks: Only one bar or popup renders at a time. Every mounted bar and popup in the same Provider shares one stack: the most recently rendered will show, this can be changed by adjusting the priority in the Bar/Popup props.
React: The wave sizes itself by measuring its container with a ResizeObserver, so it tracks layout and resize correctly inside any column width.

Text

ListensText