Avatar
The Avatar component is used to display a visual representation of a user, typically their profile picture. It can also fall back to initials or a generic icon if no image is available (though the provided cva only details image handling).
Installation
Section titled “Installation”Add the Avatar component to your project using the OrbitUI CLI:
npx orbitkit@latest add avatarImport the Avatar, AvatarImage, and AvatarFallback components and use them in your Astro components or pages. Place both AvatarImage and AvatarFallback inside the Avatar component. The AvatarFallback will be displayed if the AvatarImage fails to load.
---import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar";---
<div class="flex gap-2"> <Avatar> <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" /> <AvatarFallback>YOU</AvatarFallback> </Avatar> <Avatar bordered> <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" /> <AvatarFallback>YOU</AvatarFallback> </Avatar> <Avatar variant="square"> <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" /> <AvatarFallback>YOU</AvatarFallback> </Avatar> <Avatar variant="square" bordered> <AvatarImage src="https://i.pravatar.cc/300" alt="Avatar" /> <AvatarFallback>YOU</AvatarFallback> </Avatar></div>Avatar
Section titled “Avatar”The Avatar component accepts the following props, which are based on the avatarVariants defined using class-variance-authority:
| Prop | Type | Default |
|---|---|---|
variant | circular, square | circular |
bordered | boolean | false |
This component accepts all the standard HTML attributes that a div element would.
AvatarImage
Section titled “AvatarImage”The AvatarImage component is responsible for rendering the image within the Avatar.
This component accepts all the standard HTML attributes that an <img> element would. This includes important attributes like src (the image source URL) and alt (alternative text for accessibility)
AvatarFallback
Section titled “AvatarFallback”The AvatarFallback component is displayed when the AvatarImage fails to load or is not provided. It typically contains initials or a generic user icon.
This component accepts all the standard HTML attributes that an <div> element would.