Streaming caret
The kit's signature mark: a small rounded square at the end of text the model is writing. Solid while tokens flow, a slow blink while waiting, gone when done.
On this page
Solid while writing, blinking while waiting.
Installation
Usage
import { StreamingCaret } from "@/components/ui/chatcn/streaming-caret"
<p>
{text}
<StreamingCaret status={done ? "done" : "streaming"} activity={text} />
</p>Pass the streamed text as activity. While it keeps changing, the caret is solid. When it holds still for 600 ms, the caret starts to blink, which tells the reader the model is still there.
Props
| Prop | Type | Notes |
|---|---|---|
status | "streaming" | "waiting" | "done" | done removes it |
activity | unknown | Anything that changes with each token |
idleMs | number | Quiet time before blinking. Defaults to 600 |
Accessibility
Decorative and aria-hidden. The streaming state belongs on the message (aria-busy).
Motion
- 0.55em square on the baseline, so it scales with the text it follows.
- Blinks in 1.2 s steps only while waiting, never while writing. Static under reduced motion.