LogoBaseStack
GuideComponents

Avatar

An image element with a fallback to represent the user, and displays a profile picture, initials, or an icon.

Docs Code

Usage

HP
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/Avatar'

export function AvatarDemo() {
    return (
        <Avatar>
            <AvatarImage src="https://github.com/henry-phm.png" alt="@henry-phm" />
            <AvatarFallback>HP</AvatarFallback>
        </Avatar>
    )
}

Examples

Different Sizes

HPHPHP
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/Avatar'

export function AvatarSizes() {
    return (
        <div className="flex items-center space-x-4">
            <Avatar className="size-8">
                <AvatarImage src="https://github.com/henry-phm.png" alt="@henry-phm" />
                <AvatarFallback>HP</AvatarFallback>
            </Avatar>
            <Avatar className="size-12">
                <AvatarImage src="https://github.com/henry-phm.png" alt="@henry-phm" />
                <AvatarFallback>HP</AvatarFallback>
            </Avatar>
            <Avatar className="size-16">
                <AvatarImage src="https://github.com/henry-phm.png" alt="@henry-phm" />
                <AvatarFallback>HP</AvatarFallback>
            </Avatar>
        </div>
    )
}