Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/avatar.jsonUsage
<script lang="ts">
import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
<Avatar.Root>
<Avatar.Image src="/avatars/01.png" alt="User avatar" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>API Reference
Avatar.Root
Root component. Styled wrapper for Avatar.Root from Shards UI with a default size of 32px and rounded-full styling.
Avatar.Image
Image element for the avatar. Styled wrapper for Avatar.Image from Shards UI.
Avatar.Fallback
Fallback content displayed while the image loads or when it fails. Styled wrapper for Avatar.Fallback from Shards UI with a muted background.
See the Shards Avatar API for image loading callbacks, fallback delay, and primitive props.