Roles and permissionsPro
A 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { RolesPermissions } from 'animui/roles-permissions';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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.