Sivir UI
Studio 64

Avatar

An image with initials as a fallback. Comes in two shapes and several sizes.

User AN

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add avatar

Usage

Import and use the Avatar component:

import * as Avatar from '$lib/sivir/components/avatar';

<Avatar.Root>
  <Avatar.Image src="/avatar.jpg" alt="User" />
  <Avatar.Fallback>AB</Avatar.Fallback>
</Avatar.Root>

Examples

Sizes

SM MD LG XL

Shapes

CR SQ

With image

User AB

Anatomy

Avatar.Root - Provides the avatar container.

Avatar.Image - Renders the avatar image.

Avatar.Fallback - Renders fallback avatar content.