# Members

Workspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/members
```

## Usage

```tsx
import { Members } from '@/components/fetaui/members'

export function Example() {
  return <Members workspace="Fieldnote" seats={10} members={members} pending={pending} onInvite={invite} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| workspace | string | required |
| seats | number | required |
| members | Member[] | required |
| pending | PendingInvite[] | [] |
| roles | string[] | Admin, Member, Viewer |
| defaultRole | string | Member |
| defaultDraft | string |  |
| onInvite | (emails, role) => void |  |
| onRoleChange | (id, role) => void |  |
| onRemove | (id) => void |  |
| onResend, onRevoke | (id) => void |  |
| animated | boolean | true |

## When to use

- For the people page of a workspace or team setting.

## When not to use

- For a read only staff list: use People Directory.
- For one row in your own layout: use Member Row.

## Accessibility

- The seat bar is a labelled progress bar.
- Each role Select and remove button is named after the member.
- Presence repeats in the Active now text, never colour alone.
- Owner has no Select, so it cannot be changed by mistake.

## Motion

- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- The seat count rolls and the bar scales over 240 ms as addresses are typed.
- Press is 0.98 from Button.
- With reduced motion, the panel fades only and values swap.