Skip to content
EMBOSS
Docs menu

Avatar

A portrait set into a machined bezel — the image sits debossed inside the ring and the fallback engraves mono initials.

@emboss/avatar
OPEMQA

Installation

pnpm dlx shadcn@latest add @emboss/avatar

Usage

example.tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="/operator.jpg" alt="Operator" />
      <AvatarFallback>OP</AvatarFallback>
    </Avatar>
  );
}

API reference

Avatar / AvatarImage / AvatarFallback

The bezel, the portrait, and the engraved initials shown while the image loads or fails.

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Diameter of the bezel (Avatar).
src / altstring / string—Image source and description (AvatarImage).

Source

View source — avatar.tsx
avatar.tsx
"use client";

import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const avatarVariants = cva(
  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-well shadow-deboss-1 select-none",
  {
    variants: {
      size: {
        sm: "size-7 text-[0.625rem]",
        md: "size-9 text-xs",
        lg: "size-12 text-sm",
      },
    },
    defaultVariants: {
      size: "md",
    },
  },
);

export type AvatarProps = React.ComponentProps<typeof BaseAvatar.Root> &
  VariantProps<typeof avatarVariants>;

/**
 * A portrait set into a machined bezel: the image sits debossed inside the
 * ring, and the fallback engraves initials in mono.
 *
 * @example
 * <Avatar size="lg">
 *   <AvatarImage src="/operator.jpg" alt="Operator" />
 *   <AvatarFallback>OP</AvatarFallback>
 * </Avatar>
 */
function Avatar({ className, size, ...props }: AvatarProps) {
  return (
    <BaseAvatar.Root
      data-slot="avatar"
      className={cn(avatarVariants({ size }), className)}
      {...props}
    />
  );
}

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

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof BaseAvatar.Fallback>) {
  return (
    <BaseAvatar.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center font-mono font-semibold tracking-wide text-ink-muted uppercase text-engraved",
        className,
      )}
      {...props}
    />
  );
}

export { Avatar, AvatarImage, AvatarFallback };

Related

BadgeAn etched part-number chip in neutral, semantic, and outline tints — the label text always carries the meaning.SkeletonA debossed empty pocket awaiting content, with a slow light sheen sweeping across it.