# Hover Preview: Team

> Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/hover-preview-team-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/hover-preview-team-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/hover-preview-team-demo-light-dad388ce7a5c70b2.png
- Registry item: https://keyframeui.com/r/hover-preview-team-demo.json
- Categories: list, image, motion
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/hover-preview-team-demo.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: `https://keyframeui.com/r/hover-preview.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/hover-preview#hover-preview-team-demo

## Files

### `registry/demos/hover-preview-team-demo.tsx`

```tsx
import { HoverPreview, HoverPreviewItem } from "@/components/ui/hover-preview";

const people = [
  { name: "Ines Moreau", role: "Creative Director", city: "Paris", photo: "1438761681033-6461ffad8d80" },
  { name: "Rafael Santos", role: "Design Lead", city: "Lisbon", photo: "1507003211169-0a1dd7228f2d" },
  { name: "Mei Tanaka", role: "Motion Designer", city: "Tokyo", photo: "1534528741775-53994a69daeb" },
  { name: "Luca Bianchi", role: "Engineering Lead", city: "Milan", photo: "1500648767791-00dcc994a43e" },
  { name: "Amara Okafor", role: "Strategy Director", city: "Lagos", photo: "1531123897727-8f129e1688ce" },
  { name: "Jonas Weber", role: "Brand Designer", city: "Berlin", photo: "1539571696357-5a69c17a67c6" },
];

const photo = (id: string, width: number, height: number) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&crop=faces&w=${width}&h=${height}&q=80`;

const slug = (name: string) => name.toLowerCase().replace(/\s+/g, "-");

export function HoverPreviewTeamDemo() {
  return (
    <section className="w-full max-w-2xl">
      <div className="mb-6">
        <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">The studio</p>
        <h3 className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
          Six people, four time zones
        </h3>
      </div>

      <HoverPreview previewClassName="aspect-[4/5] w-48 rounded-xl sm:w-56" tilt={4}>
        {people.map((person) => (
          <HoverPreviewItem
            key={person.name}
            href={`#${slug(person.name)}`}
            image={photo(person.photo, 480, 600)}
            thumbnail={photo(person.photo, 120, 120)}
            thumbnailClassName="size-10 rounded-full"
            className="border-b border-zinc-200 py-4 dark:border-zinc-800"
          >
            <span className="flex-1">
              <span className="block text-xl font-medium tracking-tight text-zinc-900 sm:text-2xl dark:text-zinc-50">
                {person.name}
              </span>
              <span className="mt-0.5 block text-sm text-zinc-500">{person.role}</span>
            </span>
            <span className="font-mono text-xs text-zinc-500">{person.city}</span>
          </HoverPreviewItem>
        ))}
      </HoverPreview>
    </section>
  );
}
```