# V avatar 11

> With Hover Effect & Tooltips

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-avatar-11).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-avatar-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-avatar-11-light-1639ac74c7838428.png
- Registry item: https://ui.cnippet.dev/r/v-avatar-11.json
- Categories: avatar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-11.json
```

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

## Dependencies

- Registry items: `@cnippet/avatar`

## Files

### `registry/default/variants/v-avatar-11.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey: <>

import { cn } from "@/lib/utils";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/registry/default/ui/avatar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip";

const avatars = [
  {
    fallback: "DK",
    name: "David Kim",
    src: "https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80",
  },
  {
    fallback: "ML",
    name: "Max Leiter",
    src: "https://github.com/maxleiter.png",
  },
  {
    fallback: "ER",
    name: "James Brown",
    src: "https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80",
  },
  {
    fallback: "JW",
    name: "Jenny Wilson",
    src: "https://github.com/pranathip.png",
  },
];

export function Pattern() {
  return (
    <div className="group/avatars flex items-center px-2 py-4">
      {avatars.map((avatar, index) => (
        <div
          className="group/avatar-item translate-x-[calc(var(--index)*-8px)] transition-all duration-300 ease-in-out will-change-transform group-hover/avatars:translate-x-[calc(var(--index)*6px)]"
          key={index}
          style={
            {
              "--index": index,
              zIndex: avatars.length - index,
            } as React.CSSProperties
          }
        >
          <Tooltip>
            <TooltipTrigger
              render={
                <Avatar
                  className={cn(
                    "origin-center ring-2 ring-background transition-transform duration-300 ease-in-out",
                    "group-hover/avatar-item:scale-110",
                  )}
                >
                  <AvatarImage alt={avatar.name} src={avatar.src} />
                  <AvatarFallback className="text-xs">
                    {avatar.fallback}
                  </AvatarFallback>
                </Avatar>
              }
            />
            <TooltipContent sideOffset={10}>{avatar.name}</TooltipContent>
          </Tooltip>
        </div>
      ))}
    </div>
  );
}
```