Avatar

An image element with a fallback for representing the user.

mode

image

fallback only

fallback text

#Installation

bunx --bun barefoot add avatar

#Examples

#Basic

1import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'23function AvatarBasic() {4  return (5    <Avatar>6      <AvatarImage src="https://github.com/kfly8.png" alt="@kfly8" />7      <AvatarFallback>KF</AvatarFallback>8    </Avatar>9  )10}

#With Fallback

1import { Avatar, AvatarFallback } from '@/components/ui/avatar'23function AvatarWithFallback() {4  return (5    <Avatar>6      <AvatarFallback>BF</AvatarFallback>7    </Avatar>8  )9}

#Group

KFABCD+3

1import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'23function AvatarGroup() {4  return (5    <div className="flex -space-x-3">6      <Avatar className="border-2 border-background">7        <AvatarImage src="https://github.com/kfly8.png" alt="@kfly8" />8        <AvatarFallback>KF</AvatarFallback>9      </Avatar>10      <Avatar className="border-2 border-background">11        <AvatarFallback>AB</AvatarFallback>12      </Avatar>13      <Avatar className="border-2 border-background">14        <AvatarFallback>CD</AvatarFallback>15      </Avatar>16      <Avatar className="border-2 border-background">17        <AvatarFallback>+3</AvatarFallback>18      </Avatar>19    </div>20  )21}

#API Reference

Avatar

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the avatar container.
children	Child	-	AvatarImage and AvatarFallback components.

AvatarImage

Prop	Type	Default	Description
src	string	-	The image source URL.
alt	string	-	Alt text for the image.

AvatarFallback

Prop	Type	Default	Description
children	Child	-	Fallback content (typically user initials).