Avatar

An image element with a fallback for representing the user.

Source

Installation

npx @rahimstack@latest add avatar

Usage

Sizes

Fallback

5R
<Avatar fallback="5R" />

Default

API Reference

const AvatarAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Avatar__root",
        "relative flex shrink-0 overflow-hidden rounded-full",
    ], {
        variants: {
            size: {
                xs: "h-6 w-6",
                sm: "h-8 w-8",
                md: "h-10 w-10",
                lg: "h-14 w-14",
                xl: "h-20 w-20",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    image: cva([
        "UI-Avatar__image",
        "aspect-square h-full w-full",
    ]),
    fallback: cva([
        "UI-Avatar__fallback",
        "flex h-full w-full items-center justify-center rounded-full bg-[--muted] text-white dark:text-gray-800 font-semibold",
    ]),
    fallbackIcon: cva([
        "UI-Avatar__fallback-icon",
        "fill-transparent",
    ]),
})