coss.comui
10.7k
Chat UI

Make room
for conversation.

Chat components for React with replies, reactions, mentions, and delivery states built in. Copy the source and make it yours.

Read the docs

Built with Base UI, Tailwind CSS, and Motion

Maya Chen

Online

Every part of a conversation

Each tile below is the real component. Click, hover, and type to try it.

Maya Chen

Can we move the launch to Thursday?

Thursday works. I’ll update the plan.

Replies

Quote a message and jump back to it in one click.

Jordan Lee

We just crossed 10,000 signups 🚀

Reactions

Hover to react. Hover a chip to see who reacted.

Thanks @Alex, this is exactly it.

Enter to send / Shift + Enter for a new line

Mentions

Type @ for suggestions, with full keyboard support.

Draft is in the doc.

Read

Comments welcome.

Delivered

Sharing it with the team now.

Not sent

Delivery states

Sending, delivered, read, and a retry when it fails.

Alex Morgan

Quick recap from today’s review. The onboarding flow tested well: most people finished it in under two minutes, and nobody got stuck on the workspace step. The empty states got a lot of love. Two things to follow up on. The invite screen still feels a little crowded on small phones, and a few people missed the “skip for now” link. I’ll pair with @Jordan on both tomorrow, then we can do one more pass before Friday.

Long messages

Long text collapses, keeping its paragraphs and mentions.

Timeline

Sticky dates and an unread marker. Scroll up to jump back.

Ready for when things go wrong

Loading, empty, offline, errors, and lost access. Recovery actions respect whether the member can still access the chat.

Design review

Maya, Jordan, Alex, and you

Enter to send / Shift + Enter for a new line

Fits wherever you need it

The same components work in a drawer, a side panel, or a full page.

Design review

Maya, Jordan, Alex, and you

Enter to send / Shift + Enter for a new line

Start building

Install the components, or start from the complete drawer example with sample data. Your app supplies messages, persistence, and permissions.

Read the docs
Conversation
ChatConversationuseChatScroll
Messages
ChatMessageChatMessageTextChatCollapsibleMessage
Composer
ComposerComposerInputComposerPopup
Actions
ChatMessageActionToolbarChatReactionPickerChatReactionChip
Replies
ChatReplyReferenceChatReplyPreview
Timeline
ChatDatePillChatUnreadDividerChatTypingIndicator
Delivery
ChatDeliveryIndicatorChatMessageInfo
States
ChatEmptyStateChatLoadingStateChatStatusBar