Streaming text

Plain text that streams in with the signature caret, an optional cadence buffer and one announcement on completion.

Markdown

On this page

A plain text summary streams in with the square caret.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/streaming-text.json

Usage

tsx

import { StreamingText } from "@/components/ui/chatcn/streaming-text"

<StreamingText text={part.text} streaming={part.state === "streaming"} />

Use it for text that is not Markdown: summaries, titles, voice transcripts, tool narration. Whitespace and line breaks are kept as written.

Examples

Cadence

The same bursty stream, as it arrives and with cadence. The buffer never falls more than about 240 ms behind and drains quickly when the stream ends.

A bursty stream as it arrives, and smoothed to a steady pace.

Props

Prop	Type	Notes
`text`	`string`	The text so far
`streaming`	`boolean`	True while more may arrive
`cadence`	`boolean \| { charsPerSecond, maxLagMs }`	Smooth streaming. Off by default
`caret`	`boolean`	Square caret while streaming. On by default
`announce`	`boolean`	Polite announcement on completion. On by default
`placeholder`	`ReactNode`	Shown before the first token, for example a thinking label

Accessibility

The container is aria-busy while streaming; screen readers hear the finished text once, through a polite live region.
The caret is decorative and hidden from assistive technology.

Motion

No typewriter delay and no per-character fades: tokens appear as they arrive, or at the cadence pace.
The caret blinks only while waiting for the next token, and is static under reduced motion. Cadence turns off under reduced motion.