Minimal AI text streaming with a magic-ink effect: each word fades in wearing a blue gradient, then settles into the theme's foreground once it lands.
npx shadcn@latest add @iconiq/streaming-textimport { StreamingText } from "@/components/ui/streaming-text";
export function AssistantReply() {
return (
<StreamingText
className="text-sm leading-relaxed"
text="Design is not just what it looks like — design is how it works."
/>
);
}textThe full text to stream in word by word. Newlines are preserved as paragraph breaks, each costing one streaming tick so paragraphs read as a natural beat. Changing it restarts the stream from the first word.
Type string
speedMilliseconds between each word appearing.
Type number·Default 120
delayMilliseconds to wait before the first word appears.
Type number·Default 0
settleDelayHow long a word wears the blue gradient before settling into the theme foreground, in milliseconds. The default keeps the blue trail to a handful of words; raise it for a longer trail behind the stream head.
Type number·Default 300
showCursorShow a small pulsing gradient dot riding the stream head while words are still landing. It pops away when the stream completes.
Type boolean·Default true
onCompleteCalled exactly once, on the tick that reveals the last word. Under reduced motion it fires immediately, since the full text is already visible.
Type () => void
classNameExtra classes for the wrapping span.
Type string
Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.
Dependencies: motion.
Contact
Additionally, if you find any bug or issue, feel free to raise an issue.