Avatar
A circular image with a graceful fallback across five sizes.
<script lang="ts">
import { Avatar } from "$lib/components/ui/avatar";
</script>
<div class="flex flex-wrap items-center gap-3">
<Avatar size="sm" src="/levish_avatar.png" alt="lily" />
<Avatar src="/levish_avatar.png" alt="lily" />
<Avatar size="lg" alt="Fallback" />
<Avatar size="xl" alt="Fallback" />
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the avatar source from the registry into $lib/components/ui/avatar.
Usage
<script lang="ts">
import { Avatar } from '$lib/components/ui/avatar';
</script>
<Avatar src="/avatars/lily.png" alt="lily" />Fallback
When src is missing or fails to load, a neutral placeholder icon is shown.
<Avatar alt="Unknown user" />Sizes
<Avatar size="xs" alt="xs" />
<Avatar size="sm" alt="sm" />
<Avatar alt="default" />
<Avatar size="lg" alt="lg" />
<Avatar size="xl" alt="xl" />