267
Invite people, manage members and pending invites, and tune a role-by-permission matrix with a locked owner column, live head counts and a duplicate-to-customise role.
akapermissions·rbac·members
Run this in any project set up for the shadcn CLI. It copies the Members & Roles source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/team-roles.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { TeamRoles } from "@/components/team-roles";
export default function Page() {
return <TeamRoles />;
}A free React screen in the Settings collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Members & Roles source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| className | string | — |
| areas | TeamPermissionArea[] | defaultAreas |
| roles | TeamRole[] | defaultRoles |
| members | TeamMember[] | defaultMembers |
| invites | TeamInvite[] | defaultInvites |
| currentUserId | string | "m1" |
| onNavigate | (section: SettingsSectionId) => void | — |