Base
Components

Avatar

A person or a team as a photo, or initials when there's none.

shadcn/uiData display
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/avatar.tsx

Preview

ISOL

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add avatar

Examples

Sizes

SMMDLG

A team

Square corners for a team or a workspace, round for a person.

OZOverzero

Props

The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.

PropTypeDefault
size"sm" | "default" | "lg""default"

Guidelines

Use it

  • Next to a name in lists, comments and the account menu.
  • Initials as the fallback, two letters.

Don't

  • Use it alone where the name matters: show the name too.

Used in

The screens in this Base that show it, found in the code.

  • The app shell, on every screen

Accessibility

  • AvatarImage needs alt text: the person's name.