<div className="flex items-center gap-4">
<Avatar
src="https://github.com/mehdibha.png"
alt="@mehdibha"
fallback="M"
/>
<Avatar
src="https://githubbb.com/mehdibha.png" // invalid URL to trigger fallback
alt="@mehdibha"
fallback="M"
/>
</div>pnpm dlx shadcn@latest add @dotui/avatarUse avatars to represent users or entities with an image or initials.
import { Avatar } from "@/components/ui/avatar";<Avatar
src="https://github.com/mehdibha.png"
alt="@mehdibha"
fallback="MB"
/>Use the controls below to experiment with different avatar props and see the live preview and code update.
The size of the avatar.
"sm" | "md" | "lg"Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(Avatar)
src="https://github.com/mehdibha.png"
alt="@mehdibha"
fallback="MB"
size="md"
/>