Roles and permissions
ProA permissions matrix with group toggles that ripple, role duplication and a review bar.
- Workspace settings where admins edit what each role can do.
- Permission matrices with grouped permissions and a review step before saving.
- Use team-members to assign roles to people.
- Use switch rows in settings-page for a few on and off settings.
- Use security-settings for personal account security.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a workspace settings page to edit what each role can do. Load roles, permission groups and grants from your authorization API and connect Save to it; saving in the preview is simulated.
import { RolesPermissions } from "@/components/arc/blocks/roles-permissions/roles-permissions"; export default function WorkspaceRoles() { return ( <section> <RolesPermissions /> </section> );}RolesPermissions
A permissions matrix with role columns, collapsible permission groups, group toggles, role duplication and a review bar for unsaved changes. Takes no props; roles, groups, grants and members are inline constants (ROLES, GROUPS, GRANTED, MEMBERS) in roles-permissions.tsx, and saving is simulated.
No props.
- Arrow keys
- Moves focus across the matrix, snapping to the nearest cell in the next row.
- HomeorEnd
- Jumps to the first or last cell in the row.
- Ctrl+HomeorCtrl+End
- Jumps to the first or last cell in the grid.
- The matrix uses grid, row, rowheader and columnheader roles with a single tab stop.
- Cells are role="switch" or role="checkbox" buttons, group toggles report aria-checked="mixed", and locked owner cells use aria-disabled.
- A polite status region announces toggles and save progress.
- Group toggles ripple across their permissions with a short stagger, and a column band follows the hovered role.
- Unsaved dots pop in and the review bar slides up while changes exist.
- Reduced motion removes the ripple and springs.
- The matrix scrolls sideways with sticky permission labels, so role columns stay aligned on narrow screens.
- Below a 760px container the label column is 208px and role columns 88px; below 540px they shrink to 160px and 84px and group counts hide.
- The review bar stays sticky to the viewport while there are unsaved changes.
- Every cell is a real control and rows are not virtualized; very large permission sets should stay collapsed by group.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a workspace settings page for editing what each role can do.
- Replace ROLES, GROUPS, GRANTED and MEMBERS in roles-permissions.tsx with data from your authorization API.
- Connect Save changes to your API; it only shows a simulated saved state.
The full library index for assistants is at /llms.txt.