Data display

Avatar

No consumers

A person or workspace, as an image or initials.

Importimport { Avatar } from "@/components/ui/Avatar";
Sourcesrc/components/ui/Avatar

fallback is required, not optional — an image can fail to load, and initials are better than a hole. Leave alt empty when the name is already beside the avatar, so a screen reader does not read it twice.

Default

Props

Avatar

PropTypeDefaultDescription
fallbackReactNode—Required. Shown when there is no image.
srcstring—Image URL.
altstring""Empty by default — correct when the name is already adjacent.