A chat typing indicator with three hopping dots in a bubble, plus an optional avatar and sender name.
npx shadcn@latest add https://hyperblur.dev/r/loader-typing.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-typing.tsx.
import { LoaderTyping } from "@/components/hyperblur/loader-typing"
<LoaderTyping name="Maya Chen" label="is typing" />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | Sender name shown above the bubble. Also gives the avatar its initials and the default announcement. | |
| avatar | string | Avatar image URL. Initials are shown when it is missing or fails to load. | |
| size | number | 36 | Bubble height in pixels. Dots and avatar scale with it. |
| color | string | "#a1a1a1" | Dot color. |
| bubble | string | "#1f1f1f" | Bubble background color. |
| accent | string | "#2f7bff" | Tint of the initials avatar. |
| label | string | Visible text next to the bubble. Replaces the default announcement. |