# Invite Teammates

An invite panel with a seat bar split by members, pending and new. At the seat limit, the action becomes an upgrade.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/invite-teammates
```

## Usage

```tsx
import { InviteTeammates } from '@/components/fetaui/invite-teammates'

export function Example() {
  return <InviteTeammates workspace="Fieldwork" plan="Starter plan" seats={10} members={5} pending={pending} onSend={send} onUpgrade={upgrade} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| workspace | string | required |
| plan | string | required |
| seats | number | required |
| members | number | required |
| pending | PendingTeammate[] | [] |
| people | string[] |  |
| sample | string |  |
| defaultValue | string |  |
| upgradeLabel | string | Upgrade to Team |
| onSend | (entries) => void |  |
| onUpgrade | () => void |  |
| onResend, onRevoke | (id) => void |  |
| animated | boolean | true |

## When to use

- When seats are limited and people need to see the cost of an invite.

## When not to use

- With unlimited seats: use Invite Field.

## Accessibility

- Over the limit, the input is invalid and the message is linked and announced.
- The seat bar repeats in the legend, so it is never colour alone.
- Resend and Revoke name the person.

## Motion

- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- The seat count rolls as people are added.
- Send invites and Resend turn their icon into a spinner, then a check with the sent count, and rest after 1.6 s.
- With reduced motion, the panel fades only and values swap.