Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Read aloud

A Read aloud button for a reply that grows into a compact player: play and pause, a bar to drag or step through word by word, speed and close. A highlight glides from word to word as it is read.

Pro
pnpm dlx shadcn@latest add @caliper/read-aloud

Assistant

Answer to: why did my invoice fail?

Your invoice failed because the card on file expired at the end of September. Add a new card under Billing, then choose Retry payment on the invoice. The charge goes through straight away, and your plan stays active the whole time.

Installs components/ui/read-aloud.tsxDepends on lucide-reactMotion honours reduced motion

When to use

Use it for

  • AI answers, articles and help content people may want to listen to.
  • Accessibility and language-learning features.

Skip it when

  • Long documents; use a full audio player with chapters.
  • Pages that already autoplay sound.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Voice when there is one
It speaks with the browser's voice and follows its word boundaries; with no voice, the same highlight keeps time silently.
Grows from its button
The player opens out of the button's width and folds back on close, so it never jumps the row.

Usage

A word slider
The bar is a slider over the words: arrows move one word, Page keys ten, and its value is read as "Word 12 of 80".

Installation

terminal
pnpm dlx shadcn@latest add @caliper/read-aloud

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { ReadAloud } from "@/components/ui/read-aloud"

The worked example comes with Pro

The 25-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

ReadAloud

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
text *string—The passage to read; it is shown as well, with the spoken word marked.
speakbooleantrueSpeaks with the browser's voice when it has one. Off, or without a voice, the marking keeps time on its own.
wordsPerMinutenumber180Reading speed at 1×, for timing without a voice.

Accessibility

It exposes group and slider semantics, with aria-hidden, aria-label, aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext kept in step with state.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Text motion examples