Avatar

Display user profile images & fallbacks.

Installation

pnpm add @base-ui/react

Examples

Implement this component in your project using Yumma CSS and Base UI.

Base

S

Status

Display online or offline indicators.

S
A
J

Verified

Include a verified badge for authenticated profiles.

S
A

Fallback

Show a fallback icon when no image or initials are available.

Initials

Generate a fallback using user initials.

SAJL

Detailed

Show additional user information alongside the avatar.

S

Sarah

@sarahc

A

Avery

@averyg

J

Jude

@judet

Stacked

Group multiple avatars together in a horizontal stack.

SAJL+3