Avatar

Data Display

An image element with a fallback placeholder that represents a user or entity.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add avatar

Import the component directly from the package:

import { Avatar } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
src	string	The image source URL.
alt	string	Alternative text for the image.
fallback	React.ReactNode	Fallback content when image is loading or fails.
className	string	Additional CSS classes to apply.

Requires `alt` text on `AvatarImage` for screen reader users. The `AvatarFallback` provides accessible text when the image fails to load.

BadgeStatus labels and counters.

KbdKeyboard key indicator.

TableStructured data grid.