Communication & Messaging
25 components for email, chat, video calls, and team collaboration
Email List Item
Inbox message row
When to useEmail clients, notification lists, inboxes.
John Doe2:34 PM
Meeting Tomorrow
Hi, just wanted to confirm our meeting...
Email Compose
New message form
When to useEmail clients, contact forms, messaging.
New Message
Chat Bubbles
Message conversation style
When to useChat apps, messaging, support.
Hey! How's it going?
10:32 AMGreat! Just finished the project 🎉
10:33 AM
Typing Indicator
User is typing animation
When to useChat apps, real-time messaging.
Notification Badge
Unread count indicator
When to useNotifications, inboxes, alerts.
Message Reactions
Emoji reactions on messages
When to useChat apps, social messaging, comments.
This is a great idea!
Voice Message
Audio message player
When to useMessaging apps, voice notes.
Video Call UI
Video conference controls
When to useVideo calls, meetings, conferencing.
Chat Input
Message composer with actions
When to useChat apps, messaging, comments.
Contact List
People/contacts list
When to useContacts, team members, chat lists.
Alice Smith
Online
Bob Johnson
Away
Carol White
Offline
Read Receipts
Message delivery status
When to useMessaging apps, chat, email.
Sending
Sent
Delivered
Read
Channel Header
Group/channel info bar
When to useTeam chat, Slack-style apps, forums.
general
42 members
Mention Input
@mention autocomplete
When to useTeam chat, comments, social apps.
Notification Toast
Pop-up message alert
When to useSystem notifications, alerts, updates.
Email Folders
Mailbox navigation
When to useEmail clients, file managers, organization.
Email Actions
Message action buttons
When to useEmail clients, message details.
Incoming Call
Call notification UI
When to useVoice/video calls, notifications.
Thread Reply
Conversation threading
When to useEmail threads, nested comments.
Original message here
Alice2h ago
This is a reply in the thread
Bob1h ago
Another reply here
Group Avatars
Multiple user avatars
When to useGroup chats, team displays, participants.
+8 others
Quick Replies
Preset response buttons
When to useChat apps, customer support, bots.
Message Search
Search within messages
When to useChat apps, email, archives.
3 days ago in #general
Found search term here
3 days ago in #general
Found search term here
Status Selector
Presence/availability status
When to useTeam chat, collaboration tools.
Pinned Message
Important message highlight
When to useChat channels, important info.
Pinned by Admin
Team meeting moved to 3pm tomorrow. Please update your calendars.
File Attachment
Shared file preview
When to useFile sharing, attachments.
project_proposal.pdf
2.4 MB • PDF Document
Scheduled Message
Delayed send indicator
When to useEmail scheduling, timed posts.
Meeting reminder
Scheduled for Dec 5, 9:00 AM
