---
title: Team
description: Team layouts for names, roles, and a little context.
group: Blocks
order: 42
---

A few straightforward ways to introduce the people behind the work. Add your own names, roles, and photos.

## Avatar grid

A centered introduction above a simple grid of avatars, names, and roles.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Team01Props = {
  className?: string;
};

const MEMBERS = [
  {
    name: "Maya Chen",
    role: "CEO",
    avatar: "/assets/brand/demos/avatars/avatar-1.png",
  },
  {
    name: "Jordan Hale",
    role: "Design",
    avatar: "/assets/brand/demos/avatars/avatar-2.png",
  },
  {
    name: "Priya Nair",
    role: "Engineering",
    avatar: "/assets/brand/demos/avatars/avatar-3.png",
  },
  {
    name: "Chris Ortega",
    role: "Product",
    avatar: "/assets/brand/demos/avatars/avatar-4.png",
  },
  {
    name: "Sam Okonkwo",
    role: "Marketing",
    avatar: "/assets/brand/demos/avatars/avatar-5.png",
  },
  {
    name: "Elena Voss",
    role: "Support",
    avatar: "/assets/brand/demos/avatars/avatar-6.png",
  },
] as const;

export function Team01({ className }: Team01Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="mx-auto max-w-md text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            Meet the team
          </h2>
          <p className="mt-2 text-sm tracking-wide text-muted-foreground">
            The people shipping blocks, tokens, and docs every week.
          </p>
        </div>
        <ul className="mt-8 grid grid-cols-2 gap-x-4 gap-y-8 @[32rem]:grid-cols-3 @[40rem]:grid-cols-6">
          {MEMBERS.map((member) => (
            <li key={member.name} className="flex flex-col items-center text-center">
              <img
                src={member.avatar}
                alt=""
                className="size-16 rounded-full object-cover @[32rem]:size-[4.5rem]"
              />
              <p className="mt-3 text-sm font-medium tracking-wide text-foreground">
                {member.name}
              </p>
              <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
                {member.role}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add team-01
```

### Usage

```tsx
import { Team01 } from "@/components/blocks/team/team-01"
```

```tsx
<Team01 />
```

## Profile cards

Filled profile cards with a photo, role, and short bio.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Team02Props = {
  className?: string;
};

const MEMBERS = [
  {
    name: "Maya Chen",
    role: "CEO & Co-founder",
    bio: "Previously design systems at Northline. Obsessed with defaults that feel finished.",
    avatar: "/assets/brand/demos/avatars/avatar-1.png",
  },
  {
    name: "Jordan Hale",
    role: "Head of Design",
    bio: "Owns the visual language — type, space, and how every block sits on a page.",
    avatar: "/assets/brand/demos/avatars/avatar-2.png",
  },
  {
    name: "Priya Nair",
    role: "Eng Manager",
    bio: "Keeps the registry sharp and the install path boring in the best way.",
    avatar: "/assets/brand/demos/avatars/avatar-3.png",
  },
  {
    name: "Chris Ortega",
    role: "Product",
    bio: "Turns customer asks into blocks teams can drop in without a redesign tax.",
    avatar: "/assets/brand/demos/avatars/avatar-4.png",
  },
] as const;

export function Team02({ className }: Team02Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="mx-auto max-w-md text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            Built by practitioners
          </h2>
          <p className="mt-2 text-sm tracking-wide text-muted-foreground">
            Small team, high taste — design and engineering in the same room.
          </p>
        </div>
        <ul className="mt-8 grid grid-cols-1 gap-3 @[40rem]:grid-cols-2">
          {MEMBERS.map((member) => (
            <li
              key={member.name}
              className="flex gap-4 rounded-xl bg-muted p-4"
            >
              <img
                src={member.avatar}
                alt=""
                className="size-14 shrink-0 rounded-xl object-cover"
              />
              <div className="min-w-0">
                <p className="text-sm font-medium tracking-wide text-foreground">
                  {member.name}
                </p>
                <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
                  {member.role}
                </p>
                <p className="mt-2 text-xs tracking-wide text-muted-foreground">
                  {member.bio}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add team-02
```

### Usage

```tsx
import { Team02 } from "@/components/blocks/team/team-02"
```

```tsx
<Team02 />
```

## Portrait cards

Three leadership portraits with name cards that slide up on hover and remain visible on touch devices.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Team03Props = {
  className?: string;
};

const MEMBERS = [
  {
    name: "Maya Chen",
    role: "CEO & Co-founder",
    avatar: "/assets/brand/demos/avatars/avatar-1.png",
  },
  {
    name: "Jordan Hale",
    role: "Head of Design",
    avatar: "/assets/brand/demos/avatars/avatar-2.png",
  },
  {
    name: "Priya Nair",
    role: "Eng Manager",
    avatar: "/assets/brand/demos/avatars/avatar-3.png",
  },
] as const;

export function Team03({ className }: Team03Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="mx-auto max-w-md text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            Leadership
          </h2>
          <p className="mt-2 text-sm tracking-wide text-muted-foreground">
            The people setting direction for product, design, and engineering.
          </p>
        </div>
        <ul className="mt-8 grid grid-cols-1 gap-4 @[40rem]:grid-cols-3">
          {MEMBERS.map((member) => (
            <li key={member.name} className="group relative aspect-[3/4] overflow-hidden rounded-xl bg-muted">
              <img
                src={member.avatar}
                alt=""
                className="absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]"
              />
              <div className="absolute inset-x-0 bottom-0 translate-y-0 p-3 transition-transform duration-300 ease-out [@media(hover:hover)]:translate-y-full [@media(hover:hover)]:group-hover:translate-y-0">
                <div className="rounded-lg bg-background/70 px-3 py-2.5 backdrop-blur-md">
                  <p className="text-sm font-medium tracking-wide text-foreground">
                    {member.name}
                  </p>
                  <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
                    {member.role}
                  </p>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add team-03
```

### Usage

```tsx
import { Team03 } from "@/components/blocks/team/team-03"
```

```tsx
<Team03 />
```