Chat Avatars
Avatar collection for messaging and chat contexts — message thread avatars, typing indicators, last-seen states, group chat composite icons, mention chips, read receipts, reaction groups, and thread reply bars.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for chat apps, light for comment sections or social feeds on white backgrounds. |
| accentColor | string | "#6366f1" | Applied to outgoing message bubble, mention chip border/text, thread reply bar, and read receipt checkmarks. |
| userName | string | "You" | Name shown above outgoing message bubbles — replace with the current user's display name. |
When to Use
Use when building chat interfaces, comment threads, activity feeds, or any messaging feature that needs rich avatar context at the message level.
Best Practices
Read receipts should show max 3 avatar thumbnails + an overflow count to avoid cluttering message rows. Typing indicators should auto-disappear after a timeout to avoid stale UI.
Why This Component Matters
Chat avatars carry enormous communicative weight — they tell you who said what, who's listening, and who reacted, all without reading text.
FAQ
QHow do I animate the typing dots?
The component uses Framer Motion keyframes on scale and opacity with staggered delays per dot. Wrap in AnimatePresence so the bubble mounts/unmounts cleanly.
QCan the GroupChatComposite handle non-square images?
Yes — each quadrant uses object-cover to fill its cell regardless of source image aspect ratio.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.