Skip to content
fulldev/ui logo fulldev/ui
X 468

Avatar

@silveltm
SV
@silveltm
SV
@silveltm
SV
@silveltm
SV
@silveltm
SV
 
---
import avatar from "@/assets/avatar-sil-veltman.webp"


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


<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar>
    <AvatarImage src={avatar} alt="@silveltm" />
    <AvatarFallback>SV</AvatarFallback>
  </Avatar>
  <Avatar class="rounded-lg">
    <AvatarImage src={avatar} alt="@silveltm" />
    <AvatarFallback>SV</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={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src={avatar} alt="@silveltm" />
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
  </div>
</div>

Installation

Section titled “Installation”

To install the avatar component, run the following command:

Terminal window
npx shadcn@latest add @fulldev/avatar

Usage

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