Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { AvatarCircles } from "@/registry/magicui/avatar-circles";
const avatars = [
{
imageUrl: "https://avatars.githubusercontent.com/u/16860528",
profileUrl: "https://github.com/dillionverma",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/20110627",
profileUrl: "https://github.com/tomonarifeehan",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/106103625",
profileUrl: "https://github.com/BankkRoll",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/59228569",
profileUrl: "https://github.com/safethecode",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/59442788",
profileUrl: "https://github.com/sanjay-mali",
},
{
imageUrl: "https://avatars.githubusercontent.com/u/89768406",
profileUrl: "https://github.com/itsarghyadas",
},
];
export function AvatarCirclesDemo() {
return <AvatarCircles numPeople={99} avatarUrls={avatars} />;
}
Installation
pnpm dlx shadcn@latest add @magicui/avatar-circles
Usage
import { AvatarCircles } from "@/components/magicui/avatar-circles";
<AvatarCircles numPeople={99} avatarUrls={avatars} />
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
numPeople | number | 99 | The number appearing in the last circle |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development