InkUI
Components

StreamingText

Token-by-token text rendering with blinking cursor for LLM streaming.

Render text as it streams in from an LLM API. The component displays a blinking cursor while streaming and fires onComplete when done. No artificial delay — text appears immediately as the text prop updates.

Live Preview
StreamingText · token-by-token output
›█
~/my-cli — node v22● running

Installation

npx @inkui-cli/inkui add streaming-text

Usage

import { StreamingText } from './components/ui/streaming-text';
import { useState } from 'react';
 
export default function App() {
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(true);
 
  // In your LLM streaming callback:
  // onToken((token) => setResponse(prev => prev + token));
  // onEnd(() => setIsStreaming(false));
 
  return (
    <StreamingText
      text={response}
      streaming={isStreaming}
      onComplete={() => console.log('Done!')}
    />
  );
}

API Reference

PropTypeDefaultDescription
textstring—Current text to display (required)
streamingbooleantrueWhether streaming is in progress
cursorstring'█'Cursor character
cursorBlinkSpeednumber530Cursor blink interval in ms
colorstring—Text color override
onComplete() => void—Called when streaming ends
themeInkUIThemedarkThemeColor theme

Previous

Accordion

Next

TokenCounter

On this page