# Avatar Group Border 1 - With Borders

> Avatar group with border around each avatar.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/avatar-group-avatar-group-border-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/avatar-group-avatar-group-border-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/avatar-group-avatar-group-border-1-light-7a42d9be75c83b38.png
- Registry item: https://shadcnblocks.com/r/avatar-group-avatar-group-border-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/avatar-group-avatar-group-border-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `class-variance-authority`, `cn`
- Registry items: `avatar`

## Files

### `example/avatar-group/avatar-group-border-1.tsx`

```tsx
"use client";

import { AvatarGroup } from "@/components/shadcnblocks/avatar-group";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

const person1 = {
  name: "Jack Walsh",
  firstName: "Jack",
  lastName: "Walsh",
  initials: "JW",
  email: "jack.walsh@example.com",
  username: "jackwalsh",
  role: "Product Designer",
  company: "Cartwright",
  location: "Brisbane, Australia",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar1.webp",
};
const person2 = {
  name: "Ilze Pērkone",
  firstName: "Ilze",
  lastName: "Pērkone",
  initials: "MK",
  email: "iperkone@example.com",
  username: "iperkone",
  role: "Brand Director",
  company: "Kivit",
  location: "Rīga, Latvia",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar2.webp",
};
const person3 = {
  name: "Vernon Desilets",
  firstName: "Vernon",
  lastName: "Desilets",
  initials: "VD",
  email: "vernod@example.com",
  username: "vernod",
  role: "Creative Director",
  company: "Soho Logix",
  location: "Paris, France",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar3.webp",
};
const person4 = {
  name: "Lín Wàngshū",
  firstName: "Lín",
  lastName: "Wangshu",
  initials: "LW",
  email: "linwang4@example.com",
  username: "liwang",
  role: "Graphic Designer",
  company: "Tenxcloud",
  location: "Shanghai, China",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar4.webp",
};

export const title = "With Borders";

const Example = () => (
  <AvatarGroup>
    {[person1, person2, person3, person4].map((person) => (
      <Avatar key={person.username} className="border-2 border-background">
        <AvatarImage src={person.avatar} alt={person.name} />
        <AvatarFallback>{person.initials}</AvatarFallback>
      </Avatar>
    ))}
  </AvatarGroup>
);

export default Example;
```

### `components/shadcnblocks/avatar-group.tsx`

```tsx
import { cva, type VariantProps } from "class-variance-authority";
import { Children, type ReactNode } from "react";
import { cn } from "cn";

const AvatarGroupVariants = cva("flex items-center", {
  variants: {
    spacing: {
      tight: "-space-x-2",
      default: "-space-x-1",
      loose: "-space-x-0.5",
      none: "space-x-0",
    },
  },
  defaultVariants: {
    spacing: "default",
  },
});

export type AvatarGroupProps = {
  children: ReactNode;
  className?: string;
  animate?: boolean;
  size?: number;
} & VariantProps<typeof AvatarGroupVariants>;

export type AvatarMoreProps = {
  count: number;
  className?: string;
  size?: number;
};

export const AvatarMore = ({
  count,
  className,
  size = 40,
  ...props
}: AvatarMoreProps) => (
  <div
    data-slot="avatar"
    className={cn(
      "flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-medium text-muted-foreground",
      className,
    )}
    style={{
      width: size,
      height: size,
    }}
    {...props}
  >
    +{count}
  </div>
);

export const AvatarGroup = ({
  children,
  className,
  animate = false,
  spacing,
  ...props
}: AvatarGroupProps) => (
  <div
    className={cn(
      "h-14",
      AvatarGroupVariants({ spacing }),
      animate && "hover:space-x-0 [&>*]:transition-all",
      className,
    )}
    {...props}
  >
    {Children.map(children, (child) => {
      if (!child) {
        return null;
      }

      return child;
    })}
  </div>
);
```