Components
Avatar
An image element with a reliable fallback for representing a user or entity.
Preview
CN
AK
UI
avatar.demo.svelte
<script lang="ts"> import * as Avatar from '$lib/components/ui/avatar';</script><div class="flex items-center gap-4"> <Avatar.Root class="size-12" ><Avatar.Image src="https://github.com/shadcn.png" alt="shadcn's avatar" /><Avatar.Fallback >CN</Avatar.Fallback ></Avatar.Root > <Avatar.Root class="size-12" ><Avatar.Image src="data:image/png;base64,invalid" alt="Missing example avatar" /><Avatar.Fallback>AK</Avatar.Fallback></Avatar.Root > <Avatar.Root class="size-12 rounded-lg" ><Avatar.Fallback class="rounded-lg bg-primary text-primary-foreground">UI</Avatar.Fallback ></Avatar.Root ></div>Installation
Install directly from the hosted registry with the shadcn-svelte CLI.
Terminal
npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/avatar.jsonTerminal
pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/avatar.jsonTerminal
yarn dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/avatar.jsonTerminal
bun x shadcn-svelte@latest add https://ui.akcodeworks.com/r/avatar.jsonUsage
Place Image and Fallback inside Root. Always provide descriptive alt text for meaningful images.
API reference
| Prop | Type | Default |
|---|---|---|
| delayMs | number | 0 |
| loadingStatus | loading | loaded | error | loading |
| src | string | required |
| alt | string | required |
Source
These files are included in the registry item and copied into the consuming project.
avatar.svelte
<script lang="ts"> import { Avatar as AvatarPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props();</script><AvatarPrimitive.Root bind:ref data-slot="avatar" class={cw('relative flex size-10 shrink-0 overflow-hidden rounded-full', className)} {...restProps}/>avatar-image.svelte
<script lang="ts"> import { Avatar as AvatarPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props();</script><AvatarPrimitive.Image bind:ref data-slot="avatar-image" class={cw('aspect-square size-full object-cover', className)} {...restProps}/>avatar-fallback.svelte
<script lang="ts"> import { Avatar as AvatarPrimitive } from 'bits-ui'; import { cw } from '$lib/utils'; let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.FallbackProps = $props();</script><AvatarPrimitive.Fallback bind:ref data-slot="avatar-fallback" class={cw( 'flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium', className )} {...restProps}/>index.ts
import Root from './avatar.svelte';import Image from './avatar-image.svelte';import Fallback from './avatar-fallback.svelte';export { Root, Image, Fallback };export { Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback };