# Team section (goodtabs UI)

A people grid with an avatar, a name and a one line role for each person.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/team-section.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/team-section`

## Usage

```tsx
import { TeamSection } from "@/components/team-section"

<TeamSection title="Core team" people={[{ name: "Ada Okafor", role: "Design engineer" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The section heading. |
| description | `ReactNode` |  | One or two sentences under the title. |
| people | `{ name: string; role: string; image?: string }[]` |  | The people, in the order shown. |
| columns | `2 | 3 | 4` | `3` | Columns from the sm breakpoint up. |
| size | `"sm" | "default"` | `"default"` | Spacing scale. sm fits a card. |

## When to use

- An about or company page
- When a face, a name and a role are enough

## When not to use

- For bios and links, use a card per person
- For a team inside an app, use team-card

## Notes for agents

- Server component; avatars fall back to initials when image is missing
- Demo names are fictional
- Role lines truncate on one line, keep them short

Docs: https://ui.goodtabs.co/components/team-section