Avatar
---import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";---<Avatar> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar>Installation
pnpx starwind@latest add avatarnpx starwind@latest add avataryarn dlx starwind@latest add avatarUsage
size
---import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";---<Avatar size="sm"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar size="md"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar size="lg"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar>variant
---import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";---<Avatar variant="default"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="primary"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="secondary"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="info"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="success"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="warning"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar><Avatar variant="error"> <AvatarImage src="https://i.pravatar.cc/150?u=a04258a2462d826712d" alt="John Doe" /> <AvatarFallback>JD</AvatarFallback></Avatar>image
Rather than passing an image URL, you can also pass an imported image to the AvatarImage component. This will optimize the image using the astro:assets <Image/> component.
---import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";import GigaChad from "@/assets/images/giga-chad.jpg";---<Avatar> <AvatarImage image={GigaChad} alt="GC" /> <AvatarFallback>GC</AvatarFallback></Avatar>Fallback
When an image fails to load or isn’t provided, the fallback content will be displayed.
---import { Avatar, AvatarImage, AvatarFallback } from "@/components/starwind/avatar";---<Avatar> <AvatarImage src="invalid-url.png" alt="Web Reaper" /> <AvatarFallback>WR</AvatarFallback></Avatar>API Reference
Avatar
The root component that serves as a container for avatar content. It renders a styled figure element with configurable size and variant options.
size: Controls the size of the avatar.variant: Sets the visual style of the avatar border.
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
variant | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "default" |
The component accepts all standard HTML attributes for <div> elements.
AvatarImage
Displays an image within the Avatar component. This component handles both remote images via URL and local imported images.
src: URL of the image to display (use this orimage, not both).image: An imported image (use this orsrc, not both).alt: Alternative text description of the image (required for accessibility).
| Prop | Type | Default |
|---|---|---|
src | string | - |
image | ImageMetadata | - |
alt | string | Required |
Either src or image must be provided, but not both. The alt attribute is required for accessibility.
AvatarFallback
Renders fallback content (typically initials) when the avatar image fails to load or isn’t provided.
The component accepts all standard HTML attributes for <div> elements.
Tip
The AvatarFallback component is automatically displayed when an image fails to load.
Changelog
v1.1.1
- Adjust component to use type
VariantPropsfromtailwind-variants. This provides greater type safety and cleans up component frontmatter. - Add eslint disable comment for using the “onerror” function which allows us to handle an image that doesn’t load. This allows us to display the fallback content.
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.