Avatar

Uma imagem de usuário com as iniciais como alternativa para menus de perfil, threads de comentários e listas de equipes — com aquele estilo neobrutalista de bordas grossas.

NBHE

NBNSHE

import {
  Avatar,
  AvatarBadge,

O avatar mostra a imagem do usuário e troca para o AvatarFallback — iniciais ou um ícone — enquanto a imagem carrega ou quando ela falha, sem deslocar o layout. Construído sobre o componente Base UI Avatar e estilizado seguindo a receita neobrutalista: uma borda grossa de 2px e iniciais em negrito na fonte de títulos.

Use quando:

Menus de perfil — o avatar do cabeçalho que abre as ações da conta; veja o exemplo de menu suspenso.
Threads de comentários e feeds de atividade — um rosto ao lado de cada linha de autor, com iniciais cobrindo fotos quebradas ou ausentes.
Listas de equipes e membros — sobreponha colaboradores com AvatarGroup e limite o excedente com AvatarGroupCount.

Instalação


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
npx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/avatar.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/avatar.json

Instale as seguintes dependências:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copie e cole o código a seguir no seu projeto.

components/ui/avatar.tsx

"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
  size?: "default" | "sm" | "lg"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      className={cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full border-2 select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn(
        "aspect-square size-full rounded-full object-cover",
        className
      )}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center rounded-full bg-muted font-head text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
        className
      )}
      {...props}
    />
  )
}

function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="avatar-badge"
      className={cn(
        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
}

Atualize os caminhos de importação para corresponder à estrutura do seu projeto.

Uso

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

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Composição

Use a seguinte composição para construir um Avatar:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use a seguinte composição para construir um AvatarGroup:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Exemplos

Básico

Um componente de avatar básico com uma imagem e um substituto.

import {
  Avatar,
  AvatarFallback,

Badge

Use o componente AvatarBadge para adicionar um badge ao avatar. O badge é posicionado no canto inferior direito do avatar.

import {
  Avatar,
  AvatarBadge,

Use a prop className para aplicar estilos personalizados ao badge, como cores, tamanhos, etc.

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge com ícone

Você também pode usar um ícone dentro de <AvatarBadge>.

import { PlusIcon } from "lucide-react"

import {

Grupo de avatares

Use o componente AvatarGroup para exibir um grupo de avatares.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Contador do grupo de avatares

Use <AvatarGroupCount> para adicionar um contador ao grupo.

NBNSHE

import {
  Avatar,
  AvatarFallback,

Grupo de avatares com ícone

Você também pode usar um ícone dentro de <AvatarGroupCount>.

NBNSHE

import { PlusIcon } from "lucide-react"

import {

Tamanhos

Use a prop size para alterar o tamanho do avatar.

NBNBNB

import {
  Avatar,
  AvatarFallback,

Você pode usar o componente Avatar como gatilho de um menu suspenso.

"use client"

import {

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

NBHE

NBNSHE

+٣

"use client"

import * as React from "react"

Acessibilidade

Um avatar é uma imagem, então valem as regras de imagem: dê ao AvatarImage um alt com o nome da pessoa quando o avatar for a única coisa que a identifica, e alt="" quando um nome visível estiver logo ao lado — senão os leitores de tela anunciam o nome duas vezes. As iniciais do AvatarFallback são texto comum e são lidas em voz alta, então mantenha-as significativas. Quando o avatar abre um menu (veja menu suspenso), coloque o nome acessível no botão gatilho, não na imagem.

Referência da API

Avatar

O componente Avatar é o componente raiz que envolve a imagem e o substituto do avatar.

Prop	Type	Default
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`className`	`string`	-

AvatarImage

O componente AvatarImage exibe a imagem do avatar. Aceita todas as props de Base UI Avatar Image.

Prop	Type	Default
`src`	`string`	-
`alt`	`string`	-
`className`	`string`	-

AvatarFallback

O componente AvatarFallback exibe um substituto quando a imagem não carrega. Aceita todas as props de Base UI Avatar Fallback.

Prop	Type	Default
`className`	`string`	-

AvatarBadge

O componente AvatarBadge exibe um indicador (badge) sobre o avatar, normalmente posicionado no canto inferior direito.

Prop	Type	Default
`className`	`string`	-

AvatarGroup

O componente AvatarGroup exibe um grupo de avatares que se sobrepõem.

Prop	Type	Default
`className`	`string`	-

AvatarGroupCount

O componente AvatarGroupCount exibe um contador em um grupo de avatares, normalmente indicando o número de avatares adicionais.

Prop	Type	Default
`className`	`string`	-

Para mais informações sobre as props de Base UI Avatar, consulte a documentação do Base UI.