Chat Components
Chat bubbles, bots, messaging UI elements and patterns
Chat Bubble Styles
Different message bubble designs
When to useEssential for any messaging interface or chat application.
Hello! How can I help?
Hi there! I'm your assistant.
Great, thanks!
Typing Indicator
Animated typing dots
When to useShow when someone is composing a message or AI is generating.
Assistant is typing
Message Animations
Different entry animations
Click "Add Message" to see animation
Chat Input Designs
Various input field layouts
Avatar with Status
User presence indicators
When to useShow online/offline status in team apps or social platforms.
U2
U3
Chat Header Designs
Various header layouts
AI Assistant
Online
Read Receipts
Message delivery status
Hey!
12:00✓✓
How's it going?
12:01✓✓
Let me know!
12:02✓✓
Quick Replies
Suggested response chips
When to useSpeed up conversations in chatbots or customer support.
Would you like me to help with that?
Window Positions
Chat widget placement
Chat
Widget preview
Message Reactions
Emoji reaction buttons
Check out this new feature!
Voice Message
Audio message player UI
When to useFor messaging apps that support voice notes.
0:00 / 0:15
Bot Welcome Screen
Initial chatbot greeting
Hi there! 👋
I'm your AI assistant. How can I help you today?
Minimized Chat
Collapsed chat state
