Search for a command to run...
Three pulsing dots — the "typing" indicator for an assistant composing a reply. A staggered opacity wave that loops while a response is pending.
Render Dots wherever something is being generated — the canonical use is an assistant
message bubble while the reply streams in. Pair it with AnimatePresence so it fades out
cleanly when the real content arrives.
Dots| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Forwarded to the row. Set a height (e.g. h-5) to align the dots within a line. |
The dots are bg-sand-9, size-1.5, and loop on a 1s linear opacity wave staggered by
0.15s each. The row carries role="progressbar".
Use it for a pending/“typing” state — an assistant composing, a tool running, a stream about to start.
Wrap it in AnimatePresence so it animates out when the content it stands in for appears.
Use it for determinate progress. When you know how far along something is, reach for Progress.
Leave it on screen indefinitely. It signals "any moment now", not "indefinitely waiting".