Avatar

stable

User image with initials fallback, presence dot and stacked groups.

since v1.41.1 kB gzip

Preview

Code

JRAO

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add avatar

Usage

React

Import only

import { Avatar, AvatarGroup } from "@/components/strata";

<AvatarGroup>
  <Avatar src="/maya.jpg" alt="Maya Chen" />
  <Avatar fallback="JR" alt="Jonas Reyes" />
</AvatarGroup>

Props

Prop	Type	Default
`src` Image URL.	string	—
`fallback` Shown while loading or on error.	ReactNode	—
`size` Diameter.	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"
`status` Presence dot.	"online" \| "away" \| "busy" \| "offline"	—

Accessibility

Badge

Compact status or count label in four styles.

Kbd

Renders keyboard shortcuts consistently across platforms.

Was this page helpful?

Documented since v1.4 · components/avatar.mdx