# Team members

> Seat usage, invite by email with role, change roles, resend or remove.

Block · Pro · https://lodeui.com/blocks/team-members

## When to use

- Workspace or organization settings.

## When not to use

- Public team pages: use profile cards.

## Installation

```bash
npx shadcn@latest add @lode/team-members
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TeamMembers } from "@/components/blocks/team-members";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TeamMembers />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Dialog, Dropdown menu, Progress, Select, Tag input, Toast

## API reference

### TeamMembers

Team management with seat usage, invite by email with role, role changes, resend and remove. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through members and actions |
| Enter / , | Add an email to invite |
| Esc | Close the invite dialog |

## Accessibility

- Role selects and menus are labelled with the member's name.

## Motion

- Invited members slide in; removed ones collapse.

## Responsive behavior

- Member rows become two lines on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Check seat limits on the server before sending invites.

## Related

- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.