Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A component displaying user avatars in a stacked, overlapping circle layout with an optional count badge.
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/avatar-circles.json
Copy the Source Code
Copy and paste the following code into your project:
avatar-circles.svelte
index.ts
Folder Structure
Folder Structure
Props
AvatarCircles
A component that displays user avatars in a stacked, overlapping circle layout.
| Name | Type | Default | Description |
|---|---|---|---|
avatarUrls | Avatar[] | required | Array of avatar objects with imageUrl and profileUrl properties |
numPeople | number | undefined | Optional number to display in the count badge (e.g., +99) |
class | string | "" | Additional CSS classes to apply |