184 Components
AI Streaming Text
TextCharacter-by-character text renderer that simulates real-time AI token streaming, complete with a physics-spring blinking cursor that vanishes when generation completes.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-streaming-text.json"
Props
TypeScript props supported by <AIStreamingText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The full text to stream. |
| speed | number | 28 | Milliseconds per character. |
| showCursor | boolean | true | Show blinking cursor while streaming. |
| cursorChar | string | "|" | Character to use as cursor. |
| onComplete | () => void | — | Called when streaming finishes. |
| autoRestart | boolean | true | Restart animation when text prop changes. |
Key Features
- Configurable streaming speed per character in milliseconds.
- Blinking pipe cursor with AnimatePresence fade-out on completion.
- prefers-reduced-motion: instantly reveals full text.
- onComplete callback for chaining responses or UI transitions.
- Auto-restarts animation when text prop changes.
Keyboard & Accessibility
- Uses inline span — preserves semantics for screen readers.
- Full text visible immediately for reduced-motion users.