# Team section

A shadcn/ui team section for about pages that should feel human: a clustered avatar grid that reveals each person's role and bio.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** About and company pages; Careers and hiring pages; Agency and studio team pages
- **Category:** Company · **Type:** Team · **Style:** Motion
- **See it:** [Live preview](https://www.craftui.space/docs/templates/team-section) · [Screenshot](https://www.craftui.space/llms.md/preview/team-section.9bc2eca5.jpg)

![Team avatar grid](https://www.craftui.space/llms.md/preview/team-section.9bc2eca5.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/team-section.json
```

This is a paid item (SEC-0001): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import TeamCluster01 from "@/components/blocks/team-section";

export default function Page() {
  return <TeamCluster01 />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `eyebrow` | `string` | `"Know my team"` | Small label above the heading. |
| `heading` | `React.ReactNode` | `"The people behind the work"` | The section's main line. |
| `body` | `React.ReactNode` | `"Six of us, one studio, and a shared refusal to ship things that feel almost ri…` | A paragraph under the heading. |
| `members` | `TeamMember[]` | `built-in demo content` | The people in the avatar cluster, each with their role and bio. |
| `className` | `string` | — | Extra classes for the section's root element. |

## Files

The install adds:

- `components/blocks/team-section.tsx`
- `components/blocks/avatar-grid.tsx`

npm dependencies (installed for you): `@hugeicons/core-free-icons`, `@hugeicons/react`, `motion`.