ListensSoft
ReactAngularReact Native

SpeechUI for React

An UI kit with all the essentials upgraded to work with speech

Setup

Requires React 19.

React
@listenssoft/speechui-react
npm install @listenssoft/speechui-react

Add ListensProvider

Wrap your app in ListensProvider, usually in App.tsx. It runs speech recognition and the press-and-hold gesture, and every control inside it picks up the transcript automatically. Pass your license key as licenseKey. Get your license key.

App.tsx

import { ListensProvider } from '@listenssoft/speechui-react';
// Optional default styles for the controls.
import '@listenssoft/speechui-react/dist/listens-default.css';

export function App() {
  return (
    <ListensProvider licenseKey="YOUR_LICENSE_KEY">
      {/* …the rest of your app */}
    </ListensProvider>
  );
}

Add a ListeningBar or ListeningPopup

The provider never renders a listening surface, so place one first inside it. A ListeningBar is a full-width strip pinned to the top of the page, with the wave and the live transcript. For a compact capsule that floats over the page instead, render a ListeningPopup in the same place. Only the most recently mounted bar or popup shows.

App.tsx

import { ListensProvider, ListeningBar } from '@listenssoft/speechui-react';
// Optional default styles for the controls.
import '@listenssoft/speechui-react/dist/listens-default.css';

export function App() {
  return (
    <ListensProvider licenseKey="YOUR_LICENSE_KEY">
      <ListeningBar />
      {/* …the rest of your app */}
    </ListensProvider>
  );
}

Light and dark mode

Every control, the listening bar and the popup follow the device’s light or dark setting on their own. To switch them yourself, set data-listens-theme="dark" or "light" on the <html> element, and remove it to follow the device again. This dark mode switch is a ListensToggle, so people can tap it or say “dark mode”. Render it anywhere inside the provider. To change the colors themselves, see Theming.

DarkModeToggle.tsx

import { ListensToggle } from '@listenssoft/speechui-react';
import { useState } from 'react';

export function DarkModeToggle() {
  // Start from the device setting, so the switch matches what's on screen.
  const [dark, setDark] = useState(
    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
  );

  function changeTheme(next: boolean) {
    setDark(next);
    // Every SpeechUI component switches to this theme.
    document.documentElement.setAttribute(
      'data-listens-theme',
      next ? 'dark' : 'light',
    );
  }

  return (
    <ListensToggle
      label="Dark mode"
      command="dark mode"
      checked={dark}
      onChange={changeTheme}
    />
  );
}

Components

Every control on one page, with the interaction model you can try out rather than read about.

Open the React gallery

Was this page helpful?