Nexus DSdocs

Avatar

AL

Installation

npm install @radix-ui/react-avatar@^1.1.11 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/utils.ts
components/avatar/avatar.tsx
components/avatar/index.ts

Code

'use client';

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

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="/avatars/ada.svg" alt="Ada Lovelace" />
      <AvatarFallback>AL</AvatarFallback>
    </Avatar>
  );
}

Props

Avatar

Avatar props
PropTypeDefaultDescription
ringbooleanfalse

When true, renders a non-interactive emphasis ring around the avatar. Use for selected/current visual emphasis; focus rings belong on the interactive wrapper, not Avatar itself.

shape"rounded" | "circle" | null"circle"No description
size"sm" | "lg" | "2xs" | "xs" | "md" | "xl" | "2xl" | "3xl" | "4xl" | null"md"No description

AvatarFallback

AvatarFallback adds no props of its own; it accepts the props of the element or primitive it wraps.

AvatarGroup

AvatarGroup props
PropTypeDefaultDescription
maxnumberNo default documented

Maximum number of avatars to render before collapsing the remainder into a +N tile.

shape"rounded" | "circle" | null"circle"No description
size"sm" | "lg" | "2xs" | "xs" | "md" | "xl" | "2xl" | "3xl" | "4xl" | null"md"No description

AvatarImage

AvatarImage adds no props of its own; it accepts the props of the element or primitive it wraps.

AvatarStatus

AvatarStatus props
PropTypeDefaultDescription
labelstringNo default documented

Visually-hidden text announced by assistive tech in place of the colour-only dot. Defaults to the capitalised status. Pass '' to opt out when an adjacent text label already conveys presence.

status"online" | "away" | "busy" | "offline" | null"online"No description

Examples

Sizes

'use client';

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

const sizes = [
  '2xs',
  'xs',
  'sm',
  'md',
  'lg',
  'xl',
  '2xl',
  '3xl',
  '4xl',
] as const;

export default function AvatarSizes() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-end nx:gap-3">
      {sizes.map((size) => (
        <Avatar key={size} size={size} role="img" aria-label="Ada Lovelace">
          <AvatarFallback aria-hidden="true">AL</AvatarFallback>
        </Avatar>
      ))}
    </div>
  );
}

Shapes

GHGH
'use client';

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

export default function AvatarShapes() {
  return (
    <div className="nx:flex nx:items-center nx:gap-4">
      <Avatar size="lg" shape="circle">
        <AvatarImage src="/avatars/grace.svg" alt="Grace Hopper" />
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <Avatar size="lg" shape="rounded">
        <AvatarImage src="/avatars/grace.svg" alt="Grace Hopper" />
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
    </div>
  );
}

With status

ALOnlineGHAwayKJBusyMJOffline
'use client';

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

const people = [
  {
    name: 'Ada Lovelace',
    initials: 'AL',
    src: '/avatars/ada.svg',
    status: 'online',
  },
  {
    name: 'Grace Hopper',
    initials: 'GH',
    src: '/avatars/grace.svg',
    status: 'away',
  },
  {
    name: 'Katherine Johnson',
    initials: 'KJ',
    src: '/avatars/katherine.svg',
    status: 'busy',
  },
  {
    name: 'Mary Jackson',
    initials: 'MJ',
    src: '/avatars/mary.svg',
    status: 'offline',
  },
] as const;

export default function AvatarWithStatus() {
  return (
    <div className="nx:flex nx:items-center nx:gap-4">
      {people.map((person) => (
        <Avatar key={person.name} size="lg">
          <AvatarImage src={person.src} alt={person.name} />
          <AvatarFallback>{person.initials}</AvatarFallback>
          <AvatarStatus status={person.status} />
        </Avatar>
      ))}
    </div>
  );
}

Group

ALGHKJ
'use client';

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

const team = [
  { name: 'Ada Lovelace', initials: 'AL', src: '/avatars/ada.svg' },
  { name: 'Grace Hopper', initials: 'GH', src: '/avatars/grace.svg' },
  { name: 'Katherine Johnson', initials: 'KJ', src: '/avatars/katherine.svg' },
  { name: 'Mary Jackson', initials: 'MJ', src: '/avatars/mary.svg' },
  { name: 'Dorothy Vaughan', initials: 'DV', src: '/avatars/dorothy.svg' },
];

export default function AvatarGroupDemo() {
  return (
    <AvatarGroup max={3} role="group" aria-label="Project team">
      {team.map((person) => (
        <Avatar key={person.name}>
          <AvatarImage src={person.src} alt={person.name} />
          <AvatarFallback>{person.initials}</AvatarFallback>
        </Avatar>
      ))}
    </AvatarGroup>
  );
}