Back to components
Chat component
Chat Bubble
Chat message bubble with own/other alignment, text, time, and read status.
Install
What it does
- Own message (right-aligned, accent color) and other (left-aligned, dark)
- Bubble with sharp corners on one side
- Timestamp display below each bubble
- Read/delivered status indicator (checkmarks)
When to use
Use it
In-app chat, direct messaging, customer support conversations.
Skip it
Comments or reviews (use a flat list with comment layout instead).
Files & routes added
- components/chat/chat-bubble.tsx