Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Icon Fallback
Shows an Icon as the Avatar fallback.
Initial Fallback
Shows the user's initial as the Avatar fallback.
Size Examples
Sizes from compact to large.
Small
Compact size for constrained spaces.
Medium
Standard default size.
Large
Expanded size for emphasis or easier targeting.
Shape Examples
Shapes from sharp to fully rounded.
Square
Applies sharp corners with no border-radius.
Squircle
Applies a smooth continuous curve between adjacent corners.
More Examples
Additional variants and interactive states.
Detailed
Shows additional details alongside the primary content.
Sarah
@sarah
John
@john
Noah
@noah
Edit Profile
Opens a dialog with editable profile fields.
Stack Compact
Stacks items vertically with reduced spacing.
Stacked
Stacks items vertically.
Status
Shows a colored Status indicator.
Verified
Shows a Verified badge or checkmark.