Pro Components
Base Components
Config Members 1
Responsive card grid of team members with avatars, role badges, join dates, and dropdown actions. Invite dialog.
Example
Team Members
Manage your team members and their access permissions.
SC
Sarah Chen
Adminsarah.chen@company.io
Joined Jan 2024
MJ
Marcus Johnson
Membermarcus.j@company.io
Joined Mar 2024
ER
Elena Rodriguez
Memberelena.r@company.io
Joined Apr 2024
DP
David Park
Viewerdavid.p@company.io
Joined Jun 2024
AP
Aisha Patel
Memberaisha.p@company.io
Joined Aug 2024
TW
Thomas Wright
Viewerthomas.w@company.io
Joined Oct 2024
Introduction
Config Members 1 displays team members in a card grid:- Header: “Team members” title and Invite button that opens a dialog (email input, role selector).
- Cards: Each card shows avatar, name, email, color-coded role badge (Admin, Member, Viewer), join date, and a three-dot menu (Send email, Change role, Remove).
Usage
import { SettingsMembers3 } from "@/components/ui/settings-members-3";
<SettingsMembers3 />;