Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Powered by Mintlify
Auto-generate your docs
An avatar component for displaying user profile images with fallback support, built on @base-ui/react.
import {
Avatar,
AvatarImage,
AvatarFallback,
} from "@craftdotui/baseui/components/avatar";
<Avatar>
<AvatarImage src="/avatar.jpg" alt="User name" />
<AvatarFallback>UN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/user.jpg" alt="John Doe" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="flex -space-x-2">
<Avatar>
<AvatarImage src="/user1.jpg" alt="User 1" />
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/user2.jpg" alt="User 2" />
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="/user3.jpg" alt="User 3" />
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
<Avatar className="size-12">
<AvatarImage src="/user.jpg" alt="User" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage src="/user.jpg" alt="User" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>AB</AvatarFallback>
</Avatar>