Avatar
An image element with a fallback for representing the user. Pro version includes status indicators, badges, animations, and group features.
Unlock Advanced Avatar Features
Get access to powerful pro features that enhance your avatar component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
Status Indicators
Real-time status indicators with customizable positions and colors
Badge Notifications
Notification badges with content, icons, and custom variants
Animations
Built-in animations including pulse, bounce, spin, and ping effects
Gradient Rings
Animated gradient rings with customizable colors and glow effects
Advanced Shapes
Multiple shape options including circle, square, and hexagon
Group Components
Advanced avatar groups with spacing controls and overflow handling
Installation
Install via CLI
moonui add avatarUsage
Basic Usage
Pro Usage
Examples
Basic Usage
Avatar with image and fallback text.
Sizes
Different avatar sizes for various use cases.
Variants
Different visual styles for avatars.
Shapes
Different border radius options.
With Icons
Custom fallback content with icons.
Avatar Group
Display multiple avatars with overlap.
All Avatars
With Limit (3)
Custom Overlap
Status Indicators
Avatars with status indicators.
Pro Avatar with Status
Advanced avatar with status indicators and animations.
Online
Away
Focus
Badge Notifications
Avatars with notification badges and icons.
Gradient Rings
Avatars with animated gradient rings.
Advanced Avatar Group
Pro avatar group with advanced overlapping and animations.
Team Members (Tight)
Contributors (With Status)
Async Avatar Loading
Avatars with loading and error states.
Loading...
Error
Loaded
Different Shapes
Pro avatars with hexagon and other custom shapes.
Circle
Square
Hexagon