Pro Components

Base Components

Config Members 3

Vertical member list with avatars, role badges, search, help link, and invite dialog with dropdown actions.

Example

Workspace Members

Add teammates to collaborate on projects together. Control permissions and manage access levels for each member. View member permissions guide

4 members

  • Sofia Martinez

    Sofia Martinez

    sofia.m@example.com

  • A

    Alex Chen

    alex.c@example.com

  • Jordan Blake

    Jordan Blake

    jordan.b@example.com

  • M

    Morgan Reid

    morgan.r@example.com

Introduction

Config Members 3 is a list-based members view:
  • Header: “Members” title, subheading with a “Learn more” help link, search input, and Invite button.
  • List: Each row shows avatar, name, email, role badge, and a three-dot menu (Change role, Remove). Invite dialog includes email and role selector.
Uses Button, Input, Avatar, Badge, Dropdown Menu, Dialog, and Native Select. Compact and suitable for smaller teams or when a table is not needed.

Usage

import { SettingsMembers2 } from "@/components/ui/settings-members-2";

<SettingsMembers2 />
Wire search to filter the list and connect invite and dropdown actions to your API.

On this page

ExampleIntroductionInstallationUsage