Avatar

An avatar component that follows our design system guidelines with support for different sizes, statuses, icons and fallbacks.

Installation

npx shadcn@latest add "https://frappe-ui-react.tmls.dev/registry/avatar"

Usage

Sizes

Avatar comes in 7 different sizes: xs, sm, md, lg, xl, 2xl, and 3xl.

Status Indicators

Avatars can show different status indicators: active, away, sleep, pin, and pinned.

Fallback and Icons

You can use text fallbacks or icons when no image is available.

Squared Variant

Avatars can be squared instead of circular.