# Team card (goodtabs UI)

An avatar stack with the team name, a member count and one action.

## Install

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

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

## Usage

```tsx
import { TeamCard } from "@/components/ui/team-card"

<TeamCard
  name="Design engineering"
  href="/teams/design"
  members={[{ name: "Mira Sato", image: "/mira.png" }, { name: "Jonas Keller" }]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` |  | The team's name. |
| members | `{ name: string; image?: string }[]` |  | Every member. Initials show when there is no image. |
| max | `number` | `3` | Avatars shown before the +n circle. |
| action | `ReactNode` |  | Something on the right. Replaces the default View link. |
| href | `string` |  | Makes the name a link and adds the View pill. |
| variant | `"card" | "row"` | `"card"` | card has its own frame; row has none, for lists with divide-y. |

## When to use

- Team and workspace lists in settings, admin and onboarding
- A members summary at the top of a project page
- Anywhere a group needs a face and a count in one row

## When not to use

- For a single person, use a profile row with one avatar
- When every member needs to be named or actioned, use a table or list

## Notes for agents

- Server component: pass a client element into action if it needs handlers
- Without href and action there is nothing on the right; href adds the View pill and links the name
- Avatars use shadcn Avatar at size-7 with a ring-card ring, so put the card on bg-card or a matching surface
- variant="row" drops the frame; stack rows inside a rounded-lg border bg-card divide-y box

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