Pro Components

Base Components

Config Members 2

Members grouped by role (Admin, Member, Viewer) with avatars, names, and action menus. Invite dialog.

Example

Organization Members

Manage who has access to this organization.

Owner: 1Admin: 1Developer: 2Designer: 1
5 members
  • NK

    Nina Kowalski

    nina.k@startup.co

    Owner
  • JL

    James Liu

    james.l@startup.co

    Admin
  • RG

    Rachel Green

    rachel.g@startup.co

    Developer
  • OH

    Omar Hassan

    Pending

    omar.h@startup.co

    Developer
  • LW

    Lisa Wang

    lisa.w@startup.co

    Designer

Introduction

Config Members 2 organizes members by role:
  • Header: “Members by role” and Invite button (dialog with email and role).
  • Sections: One block per role (Admin, Member, Viewer) with a role badge and count. Under each, a list of members (avatar, name, email) with a three-dot menu (Change role, Remove).
Uses Button, Input, Avatar, Badge, Dropdown Menu, Dialog, and Native Select. Good when you want to browse or manage members by access level.

Usage

import { SettingsMembers4 } from "@/components/ui/settings-members-4";

<SettingsMembers4 />
Feed the component from your API grouped by role and connect invite and actions to your backend.

On this page

ExampleIntroductionInstallationUsage