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