# Member Row

One member: avatar, name and email, last activity, a role Select and a menu. Pending adds Invited and Resend, and Deactivated locks the role.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/member-row
```

## Usage

```tsx
import { MemberRow } from '@/components/fetaui/member-row'

export function Example() {
  return <MemberRow name="Olivia Bennett" email="olivia@halcyon.example" role={role} roles={['Admin', 'Member']} onRoleChange={setRole} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| email | string | required |
| role | string | required |
| roles | (SelectOption or string)[] | required |
| name | string | email |
| src | string |  |
| status | active, pending, deactivated | active |
| activity | string |  |
| note | string |  |
| onRoleChange | (role) => void |  |
| onResend | () => void |  |
| menu | MenuEntry[] | [] |
| person | AvatarPerson |  |
| hovered | boolean | false |
| index | number | 0 |
| animated | boolean | true |

## When to use

- To build your own member list or admin table.

## When not to use

- For a whole page: use Members.

## Accessibility

- Controls are named after the person.
- Pending and Deactivated are words on a Badge, never colour alone.
- A deactivated role is plain text, so it cannot be focused.

## Motion

- The row fades in over 240 ms, 40 ms after the one before.
- Hover washes 4% over 120 ms.
- With reduced motion, the row appears at once.