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.

Large

Expanded size for emphasis or easier targeting.

Medium

Standard default size.

Small

Compact size for constrained spaces.

---

Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no br-(value).

---

Squircle

Applies a smooth continuous curve between adjacent corners.

---

More Examples

Additional variants and interactive states.

Detailed

Shows additional details alongside the primary content.

---

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.