Skip to main content

Starwind UI v1.5.0 is now available!

Avatar

John Doe
JD

Installation

Usage

size

John Doe
JD
John Doe
JD
John Doe
JD

variant

John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD
John Doe
JD

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.

Giga Chad
GC

Fallback

When an image fails to load or isn’t provided, the fallback content will be displayed.

Web Reaper
WR

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.
PropTypeDefault
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 or image, not both).
  • image: An imported image (use this or src, not both).
  • alt: Alternative text description of the image (required for accessibility).
PropTypeDefault
srcstring-
imageImageMetadata-
altstringRequired

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 VariantProps from tailwind-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-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.