Skip to content
fulldev/ui
X GitHub

Avatar

@shadcn
CN
@evilrabbit
ER
@shadcn
CN
@maxleiter
ML
@evilrabbit
ER
 
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
---


<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar class="rounded-lg">
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
  <div
    class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
  >
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
      <AvatarFallback>ML</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <AvatarFallback>ER</AvatarFallback>
    </Avatar>
  </div>
</div>

Installation

Section titled “Installation”

To install the avatar component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/avatar

Usage

Section titled “Usage”
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>