Chat Thread
NewPro
Chat bubbles that animate in, grouped by sender, with a typing indicator and scrolling that follows along until you scroll away.
Customize
#ff784f
Avatars
Times
1x
When to use it
- Support chats and in-app messaging
- Team channels and comment threads in collaboration tools
- Live event or game lobbies where messages arrive quickly
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 472
Installation
Chat Thread is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy chat-thread.tsx into components/ui and run npm install motion.
Usage
import { ChatThread } from "@/components/ui/chat-thread";
<ChatThread
className="h-[480px]"
currentUserId="me"
users={[{ id: "me", name: "You" }, { id: "mia", name: "Mia Torres", color: "#ffc24a" }]}
messages={messages}
typing={miaIsTyping ? ["mia"] : []}
>
<Composer onSend={send} />
</ChatThread>Props
16 properties| Property | Type | Default | Description |
|---|---|---|---|
| messages | ChatMessage[] | — | Messages, oldest first: { id, senderId, content, time?, status?, day? }. |
| users | ChatUser[] | — | People in the thread: { id, name, avatar?, color? }. |
| currentUserId | string | — | Your own id: these messages sit on the right. |
| typing | string[] | [] | Ids of the people typing right now. |
| color | string | "#ff784f" | Color of your own bubbles. |
| ownTextColor | string | — | Text on your own bubbles. Defaults to dark or light, whichever reads better. |
| bubbleColor | string | "#211d1a" | Color of everyone else's bubbles. |
| showAvatars | boolean | true | Show avatars beside other people's groups. |
| showNames | boolean | true | Show the sender's name above each group. |
| showTimes | boolean | true | Show the time and delivery state under each group. |
| stickThreshold | number | 72 | Distance from the bottom, in pixels, that still counts as following the conversation. |
| onReachTop | () => void | — | Called when the user scrolls to the top, to load older messages. Their scroll position is kept. |
| jumpLabel | (unread: number) => string | — | Text of the pill that jumps back down. |
| label | string | "Conversation" | Accessible name of the message log. |
| children | ReactNode | — | Rendered under the messages, usually a composer. |
| className | string | — | Extra classes for the wrapper. Give it a height. |
Dependencies: motion