# Team Grid

> The whole team, monogram avatars, no stock photos.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/team-grid).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/team-grid
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/team-grid-light-de4f24b18332f3c5.png
- Registry item: https://blockforge.terravidhal.me/r/team-grid.json
- Categories: team
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/team-grid.json
```

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

## Files

### `registry/blocks/team-grid.tsx`

```tsx
const members = [
  { name: "Nadia Bello", role: "Co-founder & CEO" },
  { name: "Théo Marchand", role: "Co-founder & CTO" },
  { name: "Ines Kaddour", role: "Design lead" },
  { name: "Sam Whitfield", role: "Staff engineer" },
  { name: "Aiko Mori", role: "Product engineer" },
  { name: "Diego Ferrer", role: "Developer relations" },
  { name: "Maya Osei", role: "Support engineer" },
  { name: "Lucas Brandt", role: "Infrastructure" },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .toUpperCase();
}

export default function TeamGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            The people behind the product
          </h2>
          <p className="mt-2 text-muted-foreground">
            Eight humans, five countries, one very active group chat.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {members.map((member) => (
            <div
              key={member.name}
              className="rounded-xl border border-border/60 bg-card p-5 text-center"
            >
              <span className="mx-auto flex size-14 items-center justify-center rounded-full bg-muted font-mono text-sm font-semibold tracking-wide text-muted-foreground">
                {initials(member.name)}
              </span>
              <h3 className="mt-4 text-sm font-medium">{member.name}</h3>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {member.role}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```