Avatar Sizes
Six standard sizes are supported: `.avatar-xs`, `.avatar-sm`, `.avatar-md`, `.avatar-lg`, `.avatar-xl`, and `.avatar-xxl`.
Avatar Shapes
Avatars can be square (default), rounded corner (`.rounded`), or circular (`.rounded-circle`).
Initials Avatars (Soft Colors)
Clean letter initials with soft background highlights using `.bg-[color]-soft` classes.
Avatars with Status Indicators
Positioned badges reflecting activity status: `online`, `offline`, `busy`, and `away`.
Pulsing Status Indicators (Live/Typing)
Avatar Groups (Stacked)
Overlay stack grouping with hover translation micro-animations.
Medium Group
Small Group
Icon Avatars
Avatars representing action items or system states using Lucide icons inside colored boxes.
Avatar Cards (Team Profile Layouts)
Jane Cooper
Senior UX Designer
Available
Cody Fisher
Lead Backend Engineer
In MeetingEsther Howard
Product Manager
Active Live