Avatar

An image element with a fallback for representing the user.

Component Source

View the source code for the avatar component.

$lib/components/ui/avatar/avatar.svelte

Installation

npx nnuikit add avatar

import * as Avatar from "$lib/components/ui/avatar/index.js";

NOTE: For assets to be public, they are required to be stored in the static or public directory.

Quick Start

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

Interactive Playground

Configure size, shape, and fallback behavior.

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

Size

Shape

Options

Fallback Only

Sizes

Different avatar sizes using utility classes.

XXS

<Avatar.Root size="xxs">...</Avatar.Root>

<Avatar.Root size="xs">...</Avatar.Root>

<Avatar.Root size="sm">...</Avatar.Root>

<Avatar.Root size="md">...</Avatar.Root>

<Avatar.Root size="lg">...</Avatar.Root>

<Avatar.Root size="xl">...</Avatar.Root>

XXL

<Avatar.Root size="xxl">...</Avatar.Root>

Accessibility

Images: alt text required on Avatar.Image

Fallback: initials shown when image fails to load

Keyboard: focusable when used as interactive element

API Reference

Avatar.Root

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	-	Sets component dimensions
`shape`	`"rounded" \| "pill" \| "square"`	-	Controls corner rounding

Avatar.Image

Prop	Type	Default	Description
`src`	`string`	-	Image source URL
`alt`	`string`	-	Accessible alternate text

Avatar.Fallback

Prop	Type	Default	Description
`delayMs`	`number`	-	Delay in ms before showing fallback