Avatar
User profile images and placeholder avatar components
Circular Avatars
Use .rounded-full
class to create circular avatars.
Rounded Avatars
Use border radius utility classes to make avatars more rounded.
Avatars with Status
Show online/offline status with position indicators.
Placeholder Initials
Circular avatars with placeholder initials.
AJ
MK
SL
JD
AB
Avatar Group (Stack)
Avatar group stacked small to large sizes.
Avatar Group with Count
Display avatars with a count for additional users.
+99
+5
Avatar Group (Grid)
Avatar group displayed in a grid layout.
+3
Border Color Variants
Avatar groups with different border colors.
Avatar with Media
Circular avatar with text and description.
Mark
Wanner
mark@example.com
Sarah
Johnson
Online
Emily
Chen
Product Designer
Pro
Member