Componentes

Avatar

Representar usuário ou entidade com foto ou iniciais.

Conteúdo e mídia

Carregando demonstração…

Código da demo
"use client";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  AvatarGroup,
  AvatarGroupCount,
} from "@/components/ui/avatar";

export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-fe-4">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="Usuário" />
        <AvatarFallback>RF</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
      <AvatarGroup>
        <Avatar>
          <AvatarFallback>A</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>B</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>C</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+3</AvatarGroupCount>
      </AvatarGroup>
    </div>
  );
}
Acessibilidade
Imagem com alt; fallback textual quando a imagem falha.
Importar
import { Avatar, AvatarImage, AvatarFallback } from "@financeequity/ui/avatar"

Neste repositório:

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
Dependências
radix-ui