Avatar

RKADSMQX

import { Avatar, AvatarFallback } from '@/registry/qure/ui/avatar'export default function AvatarDemo() {  return (    <>      <Avatar size="sm"><AvatarFallback>RK</AvatarFallback></Avatar>      <Avatar size="md"><AvatarFallback>AD</AvatarFallback></Avatar>      <Avatar size="lg"><AvatarFallback>SM</AvatarFallback></Avatar>      <Avatar size="lg" shape="square"><AvatarFallback>QX</AvatarFallback></Avatar>    </>  )}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/avatar.json

Usage

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

<Avatar>
  <AvatarImage src={clinician.photo} alt="" />
  <AvatarFallback>RK</AvatarFallback>
</Avatar>

Composition

<Avatar>            {/* the shape, the size and the fill */}
  <AvatarImage>     {/* shown once loaded; absent until then */}
  <AvatarFallback>  {/* shown while loading, and if loading fails */}
</Avatar>

AvatarFallback is not a spinner. It is the resting state — most people in a clinical system have no photo, so initials on brand teal is what an avatar normally looks like here, and the image is the exception.

Size and shape

RKADSMQX

import { Avatar, AvatarFallback } from '@/registry/qure/ui/avatar'export default function AvatarDemo() {  return (    <>      <Avatar size="sm"><AvatarFallback>RK</AvatarFallback></Avatar>      <Avatar size="md"><AvatarFallback>AD</AvatarFallback></Avatar>      <Avatar size="lg"><AvatarFallback>SM</AvatarFallback></Avatar>      <Avatar size="lg" shape="square"><AvatarFallback>QX</AvatarFallback></Avatar>    </>  )}

24, 32 and 40px, matching the Figma set. The square shape uses radius-100 at sm and radius-200 above it, because 8px on a 24px square reads as a lozenge.

With an image

RKAD

import { Avatar, AvatarFallback, AvatarImage } from '@/registry/qure/ui/avatar'export default function AvatarImage_() {  return (    <>      <Avatar size="lg">        <AvatarImage src="https://github.com/shadcn.png" alt="" />        <AvatarFallback>RK</AvatarFallback>      </Avatar>      {/* A URL that will not resolve, so the fallback shows. */}      <Avatar size="lg">        <AvatarImage src="/does-not-exist.png" alt="" />        <AvatarFallback>AD</AvatarFallback>      </Avatar>    </>  )}

The second one points at a URL that does not resolve. A broken image degrades to initials rather than to a gap — worth relying on, since photo URLs in a hospital system expire.

Stacked

RKADSM+4

import { Avatar, AvatarFallback } from '@/registry/qure/ui/avatar'export default function AvatarGroup() {  return (    <div className="flex -space-x-2">      {['RK', 'AD', 'SM', '+4'].map(initials => (        <Avatar key={initials} size="md" className="ring-2 ring-background">          <AvatarFallback>{initials}</AvatarFallback>        </Avatar>      ))}    </div>  )}

-space-x-2 with a ring in the background colour, so each avatar cuts a clean edge into the one behind it. The last item carrying a count rather than a face is a label, not a person.

Give the image an empty alt="" when the person's name is beside it. Otherwise a screen reader reads the name twice — once for the avatar, once for the label.

API Reference

Everything Base UI's Avatar accepts, plus:

Prop

Type