Avatar
An image element with a fallback for representing users.
With Image
Displays the user's profile image when available.
Fallback
Shows initials when no image is available.
Sizes
Avatars can be displayed in various sizes using Tailwind classes.
Avatar Group (Stacked)
Display multiple avatars in an overlapping stack.
Basic Stack
Large Group
With Status Badge
Show online/offline status with a colored indicator.
Animated Status
Status indicators with pulse animation for active states.
User Card
Avatar combined with user information in a card layout.
John Doe
Product Design · [email protected]
Role
Designer
Timezone
UTC+8
Comment List
A real-world example showing avatars in a comment thread.
Great work on this design — the spacing and hierarchy feel really disciplined.
Agreed. The border weights and muted grays are doing a lot of heavy lifting here.
Next step: apply this to a real settings page so we can validate density and contrast.