---
title: "Member List"
description: "A server member sidebar: role sections, presence, coloured names and APP tags."
---

A server member sidebar: role sections, presence, coloured names and APP tags. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Member List — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add member-list
``` Registry dependencies, installed with it: avatar, status-indicator, role-tag.

Files written — React: components/ui/member-list.tsx. Vue: components/ui/member-list/MemberList.vue, components/ui/member-list/MemberListSection.vue, components/ui/member-list/MemberListHeading.vue, components/ui/member-list/MemberListItem.vue, components/ui/member-list/MemberListInfo.vue, components/ui/member-list/MemberListNameRow.vue, components/ui/member-list/MemberListName.vue, components/ui/member-list/MemberListAppTag.vue, components/ui/member-list/MemberListRole.vue, components/ui/member-list/index.ts.

## Usage

React:

```tsx
import { MemberList } from "@/components/ui/member-list"
```

Vue:

```ts
import { MemberList, MemberListSection, MemberListHeading, MemberListItem, MemberListInfo, MemberListNameRow, MemberListName, MemberListAppTag, MemberListRole } from "@/components/ui/member-list"
```

## API reference

**`MemberListSection`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `offline` | `boolean \| undefined` | — | Optional offline value. |

**`MemberListName`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colored` | `boolean \| undefined` | — | Render the name in the brand colour (e.g. highlighted role). |
| `color` | `string \| undefined` | — | Role colour. Any CSS colour; wins over `colored`. |

**`MemberListAppTag`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `verified` | `boolean \| undefined` | — | Optional verified value. |

The registry exports `MemberList`, `MemberListSection`, `MemberListHeading`, `MemberListItem`, `MemberListInfo`, `MemberListNameRow`, `MemberListName`, `MemberListAppTag`, `MemberListRole`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Member List reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.