Sivir UI
79

Avatar

Avatar.Fallback renders until Avatar.Image finishes loading and stays if the image fails. Set size to sm, md, lg, or xl and shape to circle or square.

shadcn CN
<script lang="ts">
    import * as Avatar from '@sivir-ui/svelte/components/avatar';
</script>

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

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add avatar

Usage

size defaults to md and shape to circle. alt defaults to an empty string; set it to the person's name unless the name already appears next to the avatar.

import * as Avatar from '@sivir-ui/svelte/components/avatar';

<Avatar.Root>
  <Avatar.Image src="/avatars/maya-chen.jpg" alt="Maya Chen" />
  <Avatar.Fallback>MC</Avatar.Fallback>
</Avatar.Root>

Examples

Sizes

SM MD LG XL
<script lang="ts">
    import * as Avatar from '@sivir-ui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center gap-4">
    <Avatar.Root size="sm"><Avatar.Fallback>SM</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="md"><Avatar.Fallback>MD</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="lg"><Avatar.Fallback>LG</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="xl"><Avatar.Fallback>XL</Avatar.Fallback></Avatar.Root>
</div>

Shapes

CR SQ
<script lang="ts">
    import * as Avatar from '@sivir-ui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center gap-4">
    <Avatar.Root shape="circle"><Avatar.Fallback>CR</Avatar.Fallback></Avatar.Root>
    <Avatar.Root shape="square"><Avatar.Fallback>SQ</Avatar.Fallback></Avatar.Root>
</div>

With image

shadcn CN
<script lang="ts">
    import * as Avatar from '@sivir-ui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center">
    <Avatar.Root>
        <Avatar.Image src="https://github.com/shadcn.png" alt="shadcn" />
        <Avatar.Fallback>CN</Avatar.Fallback>
    </Avatar.Root>
</div>

Anatomy

Avatar.Root - Sets the size and shape.

Avatar.Image - Renders the image and reports when it loads.

Avatar.Fallback - Shows until the image loads, or stays if it fails.