Streaming Text
An AI-response text renderer — tokens materialize out of a blur at stream pace, trailed by a blinking caret that vanishes on completion.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/streaming-text.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/streaming-text.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The full text to stream in. Changing it restarts the stream. |
| by | "word" | "char" | "word" | Reveal granularity. |
| speed | number | 14 | Tokens revealed per second. |
| startDelay | number | 0 | Delay before streaming starts, in ms. |
| cursor | boolean | true | Show the blinking caret while streaming. |
| onComplete | () => void | — | Called once when the last token has been revealed. |
| className | string | — | Additional CSS classes. |