A chat preview with a business avatar, a typing indicator and messages that appear word by word with a natural rhythm, followed by a reply button.
npx shadcn@latest add https://hyperblur.dev/r/chat-bubble-typing.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chat-bubble-typing.tsx.
import { ChatBubbleTyping } from "@/components/hyperblur/chat-bubble-typing"
<ChatBubbleTyping name="Corner Kitchen" messages={["Your order is ready!", "See you at the counter."]} loop />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Corner Kitchen" | Business name in the header. |
| initials | string | Avatar initials. Derived from the name when omitted. | |
| messages | string[] | 2 order update messages | Messages typed one after another. |
| time | string | "7:42 PM" | Time label shown on finished messages. |
| phone | string | "1 555 555 0142" | Phone used to build the reply link. |
| message | string | "Hi! Yes, please add a lemonade." | Prefilled reply text. |
| href | string | Custom reply link. Overrides phone and message. | |
| typingDuration | number | 1300 | Milliseconds the typing dots show before each message. |
| wordDelay | number | 95 | Base delay per word in milliseconds. Longer words and punctuation add pauses. |
| messageGap | number | 700 | Pause between messages in milliseconds. |
| startDelay | number | 400 | Delay before the first message starts. |
| loop | boolean | false | Replay the conversation after it finishes. |
| loopDelay | number | 4200 | Pause before replaying when loop is on. |
| showHeader | boolean | true | Show the avatar, name and status line. |
| showReply | boolean | true | Show the reply button after the last message. |
| theme | "dark" | "light" | "dark" | Color scheme. |
| accent | string | "#25d366" | Color of the online dot, typing status and reply button. |
| labels | Partial<{ online; typing; reply }> | { online: "online", typing: "typing...", reply: "Reply on chat" } | Every visible string. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |