Avatar

An image element with a fallback for representing the user.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
  <Avatar.Root>
    <Avatar.Image
      src="https://github.com/shadcn.png"
      alt="@shadcn"
      class="grayscale"
    />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
    <Avatar.Badge class="bg-green-600 dark:bg-green-800" />
  </Avatar.Root>
  <Avatar.Group class="grayscale">
    <Avatar.Root>
      <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
      <Avatar.Fallback>CN</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
      <Avatar.Fallback>LR</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <Avatar.Fallback>ER</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.GroupCount>+3</Avatar.GroupCount>
  </Avatar.Group>
</div>

Installation

pnpm dlx shadcn-svelte@latest add avatar

npx shadcn-svelte@latest add avatar

npx shadcn-svelte@latest add avatar

bun x shadcn-svelte@latest add avatar

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

Copy and paste the following code into your project.

<script lang="ts">
  import { cn, type WithElementRef } from "$lib/utils.js";
  import type { HTMLAttributes } from "svelte/elements";

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
</script>

<span
  bind:this={ref}
  data-slot="avatar-badge"
  class={cn(
    "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 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
  )}
  {...restProps}
>
  {@render children?.()}
</span>

Usage

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

Basic

A basic avatar component with an image and a fallback.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Root>
  <Avatar.Image
    src="https://github.com/shadcn.png"
    alt="@shadcn"
    class="grayscale"
  />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

Badge

Use the Avatar.Badge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
  <Avatar.Badge class="bg-green-600 dark:bg-green-800" />
</Avatar.Root>

Use the class prop to add custom styles to the badge such as custom colors, sizes, etc.

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
  <Avatar.Badge class="bg-green-600 dark:bg-green-800" />
</Avatar.Root>

Badge with Icon

You can also use an icon inside <Avatar.Badge>.

<script lang="ts">
  import PlusIcon from "@lucide/svelte/icons/plus";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Root class="grayscale">
  <Avatar.Image src="https://github.com/pranathip.png" alt="@pranathip" />
  <Avatar.Fallback>PP</Avatar.Fallback>
  <Avatar.Badge>
    <PlusIcon />
  </Avatar.Badge>
</Avatar.Root>

Avatar Group

Use the Avatar.Group component to add a group of avatars.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Group class="grayscale">
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <Avatar.Fallback>LR</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
  </Avatar.Root>
</Avatar.Group>

Avatar Group Count

Use <Avatar.GroupCount> to add a count to the group.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Group class="grayscale">
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <Avatar.Fallback>LR</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.GroupCount>+3</Avatar.GroupCount>
</Avatar.Group>

Avatar Group with Icon

You can also use an icon inside <Avatar.GroupCount>.

<script lang="ts">
  import PlusIcon from "@lucide/svelte/icons/plus";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Group class="grayscale">
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
    <Avatar.Fallback>LR</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.GroupCount>
    <PlusIcon />
  </Avatar.GroupCount>
</Avatar.Group>

Sizes

Use the size prop to change the size of the avatar.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<div class="flex flex-wrap items-center gap-2 grayscale">
  <Avatar.Root size="sm">
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root size="lg">
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
</div>

You can use the Avatar component as a trigger for a dropdown menu.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    {#snippet child({ props })}
      <Button {...props} variant="ghost" size="icon" class="rounded-full">
        <Avatar.Root>
          <Avatar.Image src="https://github.com/shadcn.png" alt="shadcn" />
          <Avatar.Fallback>CN</Avatar.Fallback>
        </Avatar.Root>
      </Button>
    {/snippet}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content class="w-32">
    <DropdownMenu.Group>
      <DropdownMenu.Item>Profile</DropdownMenu.Item>
      <DropdownMenu.Item>Billing</DropdownMenu.Item>
      <DropdownMenu.Item>Settings</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item variant="destructive">Log out</DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Attachment Badge