Avatar Component
A user avatar component with image fallback. Perfect for user profiles, comments, and user identification throughout your application.
Basic Avatar
A simple avatar with image and fallback.
Sizes
Different avatar sizes for various contexts.
SMSmall
MDMedium
LGLarge
XLExtra Large
Fallback Examples
Different fallback patterns when images fail to load.
JDInitials
👤Icon
?Question Mark
USingle Letter
Status Indicators
Avatars with online/offline status indicators.
Real-world Examples
Common avatar patterns used in applications.
User Profile
SCSarah Chen
Software Engineer
Active
Last seen 2 hours ago Team Members
AJAlex Johnson
Product Manager
Comment Thread
JJohn Doe
This looks great! I think we should move forward with this design.
2 hours ago
SSarah Chen
I agree! The color scheme works perfectly with our brand.
1 hour ago
Installation
npx shadcn@latest add https://catppuccin-components.vercel.app/r/avatar.json