Member roles
A members × permissions matrix where picking a role ripples its preset across the row, single toggles turn the role into Custom, and an unsaved-changes bar slides up with a rolling count.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { MemberRoles } from '@/components/component-kit/items/block-member-roles';
export function Example() { return <MemberRoles onSave={(matrix) => console.log(matrix)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
members | RoleMember[] | 5 demo members | Members with id, name, email, initials and role; the owner row is locked. |
permissions | RolePermission[] | View, Edit, Invite, Billing, Delete | Columns ordered by reach; each role preset grants a leading run of them (owner all, admin four, member two, read only one). |
onSave | (matrix: Record<string, { role: RoleValue; grants: Record<string, boolean> }>) => void | undefined | Called with every member's role and grants once Save completes. |
compact | boolean | false | One member and no save bar, for small previews. |
autoPlay | boolean | false | Cycle the first member's role every 2s so the ripple plays. |
contentClassName | string | undefined | Class for the portalled role select. |