<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>npx 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"<Avatar
src="https://github.com/mehdibha.png"
alt="@mehdibha"
fallback="MB"
size="md"
/>Missing description.
| Prop | Type | Default | |
|---|---|---|---|
"sm" | "md" | "lg" | 'md' | ||
ReactNode | — | ||
string | — | ||
union | — | ||
string | — | ||
string | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.