Classic Avatar
Comprehensive avatar collection with multiple styles including cinematic, minimal, status indicators, initials, grouped stacks, and hover effects. Showcase of 10+ avatar variations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for dashboards/apps, light for minimal or white-background interfaces. |
| accentColor | string | "#6366f1" | Custom accent color applied to gradient rings, status glow, initials gradient, and interactive popup highlights. |
| showInteractive | boolean | true | When false, hides the Interactive States section — useful for embedding in tight spaces or simpler contexts. |
When to Use
Use when you need a complete, versatile avatar system for SaaS dashboards, admin panels, or premium interfaces. Covers all common avatar patterns — image, initials, status, and grouped — in a single showcase.
Best Practices
Use CinematicAvatar for hero/profile header moments. Pair StatusAvatar with real-time presence data. Use AvatarStack for contributor counts in tight spaces.
Why This Component Matters
A consistent avatar system communicates identity and presence hierarchy across your entire interface — standardizing these reduces visual noise and speeds up user recognition.
FAQ
QHow do I handle missing images?
Use the MonoInitials or InitialsAvatar fallback components — they generate from a name string and always render something meaningful.
QCan I customize status colors?
Yes — the StatusAvatar accepts an 'online' | 'away' | 'busy' prop that maps to emerald, amber, and rose respectively. Extend the colors object to add custom states.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.