Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
import { AvatarCircles } from "@/registry/sase/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 https://sase-ui.vercel.app/r/avatar-circles.json
Usage
import { AvatarCircles } from "@/components/ui/avatar-circles";const avatars = [
{
imageUrl: "https://avatar.url",
profileUrl: "https://profile.url",
},
];
<AvatarCircles avatarUrls={avatars} numPeople={99} />;