Avatar

An image element with a fallback for representing the user.

Loading preview…

1<script lang="ts">
2  import * as Avatar from "./index.js";
3</script>
4
5<Avatar.Root>
6  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
7  <Avatar.Fallback>CN</Avatar.Fallback>
8</Avatar.Root>
9

Installation

Usage

Use avatar for profile images with initials fallback. Set size to sm, default, or lg. Compose with Avatar.Badge, Avatar.Group, and Avatar.GroupCount for status and stacks.

1<script lang="ts">
2	import * as Avatar from '~/components/avatar';
3</script>
4
5<Avatar.Root>
6	<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
7	<Avatar.Fallback>CN</Avatar.Fallback>
8</Avatar.Root>