Streaming Text

Progressive text surface for token-by-token model output during a stream.

StreamingText is the live answer surface. Pass growing text from your stream, keep isStreaming true while tokens arrive, and the caret marks the live edge. Pair it with Bubble for the message chrome and Thinking for reasoning.

<StreamingText isStreaming={isStreaming}>
  {text}
</StreamingText>

Installation

pnpm dlx cubix@latest add streaming-text

Usage

Import

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

Example

<StreamingText isStreaming={isStreaming}>
  {text}
</StreamingText>

Note: StreamingText does not own the transport. Your chat hook appends tokens; this component renders the progressive text and caret.

Composition

StreamingText
└── StreamingTextCaret

Features

Renders growing token output from your stream
Built-in block, line, and circle carets
Hides the caret automatically when streaming ends
Supports multiline plain text with preserved newlines
Composable custom caret slot
Accessible live region while tokens arrive
Fits inside Bubble and Message rows

Completed reply

When the stream is done, set isStreaming={false} so the caret disappears.

Start with the changelog, run the smoke suite, migrate before cutover, then watch error rate and p95 latency for the first hour.

<StreamingText isStreaming={false}>
  {completedText}
</StreamingText>

Waiting for tokens

Before the first character arrives, keep isStreaming true with empty content so the caret still shows activity.

Waiting for the first token.

<StreamingText isStreaming caret="line">
  {""}
</StreamingText>

Caret styles

Choose block, line, or circle - or disable the automatic caret.

line

block

circle

none

<StreamingText isStreaming caret="line">{text}</StreamingText>
<StreamingText isStreaming caret="block">{text}</StreamingText>
<StreamingText isStreaming caret="circle">{text}</StreamingText>
<StreamingText isStreaming caret={false}>{text}</StreamingText>

Custom caret

Set caret={false} and compose StreamingTextCaret yourself.

<StreamingText isStreaming={isStreaming} caret={false}>
  {text}
  {isStreaming ? (
    <StreamingTextCaret force className="...">
      gen
    </StreamingTextCaret>
  ) : null}
</StreamingText>

Multiline

Newlines are preserved with whitespace-pre-wrap.

<StreamingText isStreaming={isStreaming}>
  {multilineText}
</StreamingText>

Stopped mid-stream

Keep the partial text when the reader stops generation.

<StreamingText isStreaming={isStreaming}>
  {partialText}
</StreamingText>

Interrupted stream

Show the truncated reply with an error and retry action below.

Deploy looks healthy. Error rate is flat, p95 is under

Stream interrupted before the reply completed.

<StreamingText isStreaming={false}>
  {truncatedText}
</StreamingText>
{/* error + retry below */}

Inside a message

Nest StreamingText inside BubbleContent and switch footer actions between Stop and Retry.

<Bubble variant="muted">
  <BubbleContent>
    <StreamingText isStreaming={isStreaming}>
      {text}
    </StreamingText>
  </BubbleContent>
</Bubble>

With Thinking

Run Thinking first, then stream the answer text in the bubble.

<Thinking isStreaming={phase === "thinking"}>
  <ThinkingTrigger />
  <ThinkingContent>{reasoning}</ThinkingContent>
</Thinking>
<Bubble variant="muted">
  <BubbleContent>
    <StreamingText isStreaming={phase === "streaming"}>
      {reply}
    </StreamingText>
  </BubbleContent>
</Bubble>

API Reference

StreamingText

Prop	Type	Default	Description
isStreaming	boolean	false	When true, marks the surface as live and shows the caret unless disabled.
caret	"block" \| "line" \| "circle" \| false	"line"	Built-in caret style, or false to hide the automatic caret.
children	React.ReactNode	-	Streamed text or composed content. Grows as tokens arrive.
className	string	-	Additional classes for the streaming text root.

StreamingTextCaret

Prop	Type	Default	Description
variant	"block" \| "line" \| "circle"	"line"	Built-in caret appearance when rendering without children.
force	boolean	false	Render even when the parent is not streaming. Useful for custom previews.
children	React.ReactNode	-	Optional custom caret contents instead of the built-in shape.
className	string	-	Additional classes for the caret.