CD
ER
CD
LR
ER
<script lang="ts">
import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
<div class="flex flex-row flex-wrap items-center gap-12">
<Avatar.Root>
<Avatar.Image src="https://github.com/cachesdev.png" alt="@cachesdev" />
<Avatar.Fallback>CD</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root class="rounded-lg">
<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<Avatar.Fallback>ER</Avatar.Fallback>
</Avatar.Root>
<div
class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
>
<Avatar.Root>
<Avatar.Image src="https://github.com/cachesdev.png" alt="@cachesdev" />
<Avatar.Fallback>CD</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root>
<Avatar.Image src="https://github.com/leerob.png" alt="@leerob" />
<Avatar.Fallback>LR</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root>
<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
<Avatar.Fallback>ER</Avatar.Fallback>
</Avatar.Root>
</div>
</div>Installation
pnpm dlx jsrepo@latest add avatarnpx jsrepo@latest add avataryarn dlx jsrepo@latest add avatarbunx jsrepo@latest add avatarInstall bits-ui:
pnpm add bits-ui -Dnpm install bits-ui -Dyarn add bits-ui -Dbun add bits-ui -DCopy and paste the following code into your project.
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
</script>
<span
bind:this={ref}
data-slot="avatar-badge"
class={cn(
'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',
'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
className
)}
{...restProps}
>
{@render children?.()}
</span>
Usage
<script lang="ts">
import * as Avatar from '$lib/components/ui/avatar/index.js';
</script><Avatar.Root>
<Avatar.Image src="https://github.com/cachesdev.png" alt="@cachesdev" />
<Avatar.Fallback>CD</Avatar.Fallback>
</Avatar.Root>