Avatar

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Base UI.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download avatar -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar>
  <AvatarImage src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22%236366f1%22/%3E%3C/svg%3E" alt="avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>;

Examples

Avatar With Image

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar>
  <AvatarImage src="https://imgur.com/Y2V03fl.png" alt="avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>;

Avatar With Fallback

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<Avatar>
  <AvatarImage src="" alt="avatar" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Prop	Type	Default	Description
`naked`	`boolean`	`false`
`size`	`"default" \| "sm" \| "lg"`	`"default"`

AvatarFallback

Prop	Type	Default	Description
`name`	`string`	`—`

AvatarImage

Prop	Type	Default	Description
`avatarStyle`	`string`	`—`
`seed`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.