Avatar

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/avatar
Copy

Usage#

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

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

Composition#

Use the following composition to build an Avatar:

CopyAvatar.Root
├── Avatar.Image
├── Avatar.Fallback
└── Avatar.Badge

Use the following composition to build an Avatar.Group:

CopyAvatar.Group
├── Avatar.Root
│   ├── Avatar.Image
│   ├── Avatar.Fallback
│   └── Avatar.Badge
├── Avatar.Root
│   ├── Avatar.Image
│   ├── Avatar.Fallback
│   └── Avatar.Badge
└── Avatar.GroupCount

Examples#

Basic#

A basic avatar component with an image and a fallback.

Badge#

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

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

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

Avatar Group#

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

Avatar Group Count#

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

Avatar Group with Icon#

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

Sizes#

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

Dropdown#

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

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

Avatar.Root#

The Avatar.Root component is the root component that wraps the avatar image and fallback.

Avatar.Image#

The Avatar.Image component displays the avatar image.

Avatar.Fallback#

The Avatar.Fallback component displays a fallback when the image fails to load.

Avatar.Badge#

The Avatar.Badge component displays a badge indicator on the avatar, typically positioned at the bottom right.

Avatar.Group#

The Avatar.Group component displays a group of avatars with overlapping styling.

Avatar.GroupCount#

The Avatar.GroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.