Primitives

Avatar

Profile image with initials fallback.

ALDSGH

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Avatar

├── AvatarImage

└── AvatarFallback

The refined source installs this primitive from src/registry/sources/refined/ui/avatar.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/avatar.json

See registry manifest

Raw code

Primary installed primitive source

Base UI Avatar slot

src/registry/sources/refined/ui/avatar.tsx

"use client";

import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";

import type { AvatarFallbackProps, AvatarImageProps, AvatarProps } from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Base UI swaps in Fallback initials when Image is missing/fails to load. size-9 default, override via className.

export function Avatar({ className, ...props }: AvatarProps) {

return (

<AvatarPrimitive.Root

data-ui="agent"

data-slot="avatar"

className={cn(

        "relative inline-flex size-9 shrink-0 select-none items-center justify-center overflow-hidden rounded-full align-middle",

skinSlot("avatar", {}),

className,

)}

{...props}

/>

);

}

export function AvatarImage({ className, ...props }: AvatarImageProps) {

  return <AvatarPrimitive.Image data-ui="agent" data-slot="avatar-image" className={cn("size-full object-cover", className)} {...props} />;

}

export function AvatarFallback({ className, ...props }: AvatarFallbackProps) {