Streaming Text

Pro

AI reply that appears word by word as it streams in, with the newest words softly highlighted. Screen readers hear the full answer once instead of every fragment.

Preview

Installation

npx @lumioui/cli add pro/streaming-text

Usage

import { StreamingText, useStreamSimulation } from "@/components/ui/streaming-text/streaming-text";
<StreamingText />

Also exported: useStreamSimulation.

Examples

Assistant

An AI health coach thread.

Greeting

An empty assistant home.

Summary

An AI trip recap inside a bookings app.

API reference

Prop Type Default
text* string

The reply so far. Append to it while streaming; replace it to restart.

 —
streaming boolean

More text is still coming — shows the tail caret. Default false.

 false
onDone () => void

Fires once when streaming has ended and every word has landed.

 —
speed "normal" | "fast"

Word cadence: "normal" ≈ 50ms between words, "fast" ≈ 25ms.

 "normal"
animateOnMount boolean

Animate text that is already complete on mount. Default true; false renders it instantly (e.g. history messages).

 true
caret boolean

Light the writing edge: new words arrive lit in the accent and cool to ink, and three waiting dots hold the empty line before the first word. Default true. Words cool to the foreground ink — if textClassName sets another text colour, pass false.

 true
announce boolean

Announce the full reply to screen readers when done. Default true.

 true
streamingLabel string

Screen-reader label while the reply is still streaming.

 "Writing response…"
className string

Container classes (paragraph gap, width).

 —
textClassName string

Type classes applied to every word — set size AND leading together.

 —