Profile Avatars
Avatar collection for user profile contexts — editable overlays, verified badges, role tags, story rings, follow suggestions, permission tiers, multi-account switchers, and connected platform icons.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — adapts all cards, text, and borders for dark or light page backgrounds. |
| accentColor | string | "#6366f1" | Applied to verified rings, follow button, permission tier highlights, and story ring gradient. |
| platform | "twitter" | "github" | "linkedin" | "twitter" | Controls which connected platform badge icon is shown in the ConnectedProfile variant. |
When to Use
Use in social platforms, creator tools, SaaS settings pages, and any product with user profiles, verification tiers, or role-based identity display.
Best Practices
Reserve gradient story rings for unseen/active state — use grey for seen. Keep verified badges consistent in placement (always bottom-right) to build visual muscle memory.
Why This Component Matters
Profile avatars are the face of identity in your product — how you render them communicates trust, role hierarchy, and social proof at a glance.
FAQ
QHow does the editable overlay work?
It's a CSS-only hover reveal — the camera icon fades in via opacity transition on the parent :hover, no JS required.
QCan the story ring animate on load?
Yes — swap the CSS spin animation with a Framer Motion initial/animate cycle to trigger on mount instead of continuously.
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.