An image element with a fallback for representing the user.
The Avatar is a copy-paste component in the UI Elements collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import { Avatar, AvatarImage, AvatarFallback } from "@/components/lightswind/avatar"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import { Avatar, AvatarImage, AvatarFallback } from "@/components/lightswind/avatar";23export function AvatarDemo() {4 return (5 <Avatar>6 <AvatarImage src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80" alt="@avatar" />7 <AvatarFallback>CN</AvatarFallback>8 </Avatar>9 );10}
Different visual and behavioral variants of the component
Standard circular avatar displaying a profile image, failing back elegantly to user initials.
A product byＭＵＨＩＬＡＮ and Team❤️.
