Four message threads — support with typing indicator, group chat with reactions, file and voice attachments, and delivery receipts — where every new message springs in.
chatmessagebubblesupporttyping indicatorreactionsvoice noteattachmentread receipt
Support thread
support-thread.tsxSupport conversation with grouped bubbles, quick-reply chips and a typing indicator before each answer.
$npx shadcn@latest add @geturui/chat-bubbles-support-thread
| Prop | Type | Default | Description |
|---|---|---|---|
agentName / agentRole | string | — | Header identity. |
messages | SupportMessage[] | — | { id, from: "agent" | "user", text, time } initial thread. |
quickReplies | QuickReply[] | — | { label, reply } chips; each is used once. |
fallbackReply | string | — | Agent answer for typed messages. |
typingDelay | number | 1400 | Milliseconds the typing indicator shows. |
onSend | (text: string) => void | — | Called for every user message. |
className | string | — | Extra classes on the root element. |
Group reactions
group-reactions.tsxGroup chat with grouped senders, toggleable reaction pills whose counts roll and an inline reaction picker.
$npx shadcn@latest add @geturui/chat-bubbles-group-reactions
| Prop | Type | Default | Description |
|---|---|---|---|
channel / members | string / number | — | Header label and member count. |
messages | GroupMessage[] | — | { id, author, time, text, reactions?, mine? } per message. |
onReact | (messageId, reaction, active) => void | — | Called when a reaction is added or removed. |
className | string | — | Extra classes on the root element. |
Attachments
attachments.tsxFile message with a ring-progress download and a voice note with a seekable waveform and speed control.
$npx shadcn@latest add @geturui/chat-bubbles-attachments
| Prop | Type | Default | Description |
|---|---|---|---|
sender / note | string | — | Sender name and the text above the file. |
file | { name: string; size: string; pages?: number } | — | Attachment details. |
voiceSeconds | number | 34 | Voice note length. |
downloadMs | number | 1600 | Simulated download time; wire onDownload to the real request. |
onDownload | () => void | — | Called when the download starts. |
className | string | — | Extra classes on the root element. |
Delivery states
delivery-states.tsxDirect-message thread where sent messages animate through sending, sent, delivered and read, with retry on failure.
$npx shadcn@latest add @geturui/chat-bubbles-delivery-states
| Prop | Type | Default | Description |
|---|---|---|---|
contact | string | "Theo Lind" | Who the thread is with. |
messages | DeliveryMessage[] | — | { id, mine, text, time, status? } where status is sending, sent, delivered, read or failed. |
autoRead | boolean | true | Walk new messages all the way to read. |
onSend / onRetry | (text: string) => void / (id: string) => void | — | Send and retry handlers. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every chat bubbles variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/chat-bubbles
Accessibility
- Threads are live regions (role=log) so new messages and the typing indicator are announced politely.
- Reactions, playback and retry are real buttons with aria-pressed or descriptive labels; the waveform is a keyboard slider.
- Message entrances and bouncing dots become simple fades with reduced motion.