Avatar Circles

PreviewCode

+99

@/demos/AvatarCirclesDemo.tsx

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

pnpm dlx shadcn@latest add @magicui-solid/avatar-circles

bun

bunx shadcn@latest add @magicui-solid/avatar-circles

yarn

yarn dlx shadcn@latest add @magicui-solid/avatar-circles

npm

npx shadcn@latest add @magicui-solid/avatar-circles

Import

import { AvatarCircles } from '@/components/magicui/avatar-circles'

Usage

<AvatarCircles
  numPeople={99}
  avatarUrls={[
    {
      imageUrl: 'https://avatars.githubusercontent.com/u/16860528',
      profileUrl: 'https://github.com/dillionverma',
    },
  ]}
/>

Props

Prop	Type	Default	Description
class	string	-	Optional CSS class name to apply custom styles.
numPeople	number	-	The number appearing in the last circle.
avatarUrls	Avatar[]	-	Array of { imageUrl, profileUrl } pairs to display.

Original:

magicui.design/docs/components/avatar-circles