Avatar

Preview

CNER
CNLRER
 
import { Avatar, AvatarFallback, AvatarImage } from "@/registry/components/avatar/react/avatar";


export default function AvatarDemo() {
    return (
        <div className="cluster gap-xl">
            <Avatar>
                <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                <AvatarFallback>CN</AvatarFallback>
            </Avatar>
            <Avatar data-variant="square">
                <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                <AvatarFallback>ER</AvatarFallback>
            </Avatar>
            <div className="avatar-group" data-filtered>
                <Avatar className="overlap">
                    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                    <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="overlap">
                    <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
                    <AvatarFallback>LR</AvatarFallback>
                </Avatar>
                <Avatar className="overlap">
                    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                    <AvatarFallback>ER</AvatarFallback>
                </Avatar>
            </div>
        </div>
    );
}

Installation

You can add the avatar component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the avatar component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components avatar --framework react
npx make-sugarcube@latest components avatar --framework react
yarn make-sugarcube@latest components avatar --framework react
bunx --bun make-sugarcube@latest components avatar --framework react

What’s included

When you add the button component, you get:

  • avatar.tsx - The React component implementation
  • avatar.css - The base styles for the avatar
  • avatar.tokens.json - The CSS variables that map to your design tokens
  • @clsx - The clsx utility for conditional classes
"use client";


import * as AvatarPrimitive from "@radix-ui/react-avatar";
import type * as React from "react";


import cn from "clsx";


function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
    return (
        <AvatarPrimitive.Root data-slot="avatar" className={cn("avatar", className)} {...props} />
    );
}


function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
    return (
        <AvatarPrimitive.Image
            data-slot="avatar-image"
            className={cn("avatar-image", className)}
            {...props}
        />
    );
}


function AvatarFallback({
    className,
    ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
    return (
        <AvatarPrimitive.Fallback
            data-slot="avatar-fallback"
            className={cn("avatar-fallback", className)}
            {...props}
        />
    );
}


export { Avatar, AvatarImage, AvatarFallback };
.avatar {
    position: relative;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    height: var(--avatar-size);
    width: var(--avatar-size);
    border-radius: var(--avatar-radius);
}


.avatar-image {
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--avatar-fallback-bg);
    border-radius: var(--avatar-radius);
}
{
  "avatar": {
    "size": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "rem"
      }
    },
    "radius": {
      "$value": "{radius.full}"
    },
    "fallback-bg": {
      "$value": "{color.bg-offset-1}"
    }
  }
}

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::