8.0k New

Avatar

Previous Next

An image element with a fallback for representing the user.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor
CN
ER
CN
LR
ER
+3
<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

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.

CN
<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.

CN 
<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>.

PP 
<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.

CN
LR
ER
<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.

CN
LR
ER
+3
<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>.

CN
LR
ER
<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.

CN
CN
CN
<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>

Dropdown

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>