Avatar

Un elemento de imagen con respaldo (fallback) para representar a un usuario.

default.tsx

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function Default() {
6  return (
7    <Avatar>
8      <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
9      <Avatar.Fallback>US</Avatar.Fallback>
10    </Avatar>
11  );
12}

Instalación

pnpm dlx nachui add avatar

Anatomía

1import { Avatar } from '@/components/ui/avatar';

1<Avatar>
2  <Avatar.Image src="https://github.com/shadcn.png" />
3  <Avatar.Fallback>CN</Avatar.Fallback>
4</Avatar>

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function Default() {
6  return (
7    <Avatar>
8      <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
9      <Avatar.Fallback>US</Avatar.Fallback>
10    </Avatar>
11  );
12}

Tamaños (Sizes)

Puedes cambiar el tamaño del componente mediante la prop size.

sizes.tsx

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function Sizes() {
6  return (
7    <div className="flex items-center gap-4">
8      <Avatar size="sm">
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
10        <Avatar.Fallback>FI</Avatar.Fallback>
11      </Avatar>
12
13      <Avatar size="md">
14        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
15        <Avatar.Fallback>FI</Avatar.Fallback>
16      </Avatar>
17
18      <Avatar size="lg">
19        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
20        <Avatar.Fallback>US</Avatar.Fallback>
21      </Avatar>
22    </div>
23  );
24}

Con Respaldo (With Fallback)

Si la imagen no carga o da error, se mostrará el texto de fallback.

FIFI

with-fallback.tsx

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function WithFallback() {
6  return (
7    <div className="flex gap-4">
8      {/* Broken image link to test fallback */}
9      <Avatar>
10        <Avatar.Image src="https://github.com/figueroaignacio.pn" alt="@figueroaignacio" />
11        <Avatar.Fallback>FI</Avatar.Fallback>
12      </Avatar>
13
14      {/* No image provided to test fallback */}
15      <Avatar>
16        <Avatar.Fallback className="bg-primary text-primary-foreground">FI</Avatar.Fallback>
17      </Avatar>
18    </div>
19  );
20}

Grupo de Avatares (Avatar Group)

Muestra varios avatares solapados agrupándolos con Avatar.Group.

MZ+3

avatar-group.tsx

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4
5export function AvatarGroup() {
6  return (
7    <Avatar.Group>
8      <Avatar>
9        <Avatar.Image src="https://github.com/figueroaignacio.png" alt="@figueroaignacio" />
10        <Avatar.Fallback>FI</Avatar.Fallback>
11      </Avatar>
12      <Avatar>
13        <Avatar.Image src="https://github.com/nicvazquezdev.png" alt="@nicvazquezdev" />
14        <Avatar.Fallback>NV</Avatar.Fallback>
15      </Avatar>
16      <Avatar>
17        <Avatar.Image src="https://github.com/ManuZarraga.png" alt="@ManuZarraga" />
18        <Avatar.Fallback>MZ</Avatar.Fallback>
19      </Avatar>
20      <Avatar>
21        <Avatar.Fallback className="bg-muted text-muted-foreground">+3</Avatar.Fallback>
22      </Avatar>
23    </Avatar.Group>
24  );
25}

Referencia de API

Avatar

Prop	Tipo	Por defecto	Descripción
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamaño visual del avatar
`className`	`string`	-	Clases CSS adicionales

AnteriorAccordion SiguienteBadge