StreamingIndicator

StreamingIndicator

<ChatMessage role="assistant" pending>
  helixui is a design system where every component is one self-describing
  <StreamingIndicator variant="block" />
</ChatMessage>

Install: @helixui/core

import { StreamingIndicator } from '@helixui/core'

status: stable · since: 0.3.0

Tags: ai, streaming, caret, inline

Anatomy

…some streamed text▍   ← blinking caret at the end

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — ~10px wide caret / ~16px dots
• stackable — false
• fullBleed — false

Visual

A small inline marker placed at the end of streaming text. Variants: blinking caret, pulsing block, or three dots.

Props

Name	Type	Default	Description
variant	'caret' | 'block' | 'dots'	block	Visual style.

Tokens used

color.text.action.brand

Accessibility

Role: status

Notes

• The element has aria-label=\"Streaming\". Animation respects prefers-reduced-motion.

Composes with

Component	Relation	Note
ChatMessage	child	Lives inside an in-flight assistant message.
TypingIndicator	alternative	TypingIndicator is shown while another participant types.
ThinkingBlock	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show LLM streaming

“caret at the end of streamed text”

<>{text}<StreamingIndicator /></>

Related

• ChatMessage
• ThinkingBlock