PermissionMatrix
ShowcaseComponentsPermissionMatrix
Data

PermissionMatrix.

Manage role-permission grants in a compact accessible grid.

Real interactive component
Live demo
PermissionOwnerEditorViewer
ReadView project data
WriteCreate and edit content
ManageChange account settings

The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.

Props & API reference

Parameters available in the shared component, including value types, requirements and accepted options.

6 props
ParameterTypeRequiredDefaultPossible valuesDescription
rolesRole[]Yes——Role identifiers and names.
permissionsPermission[]Yes——Permissions and descriptions.
valueRecord<string,string[]>Yes——Granted permission keys per role.
onChange(value: Record<string,string[]>) => voidNo——Receives changed grants.
readOnlybooleanNofalsetrue · falseDisable permission changes.
classNamestringNo——Additional CSS class on the outer component element.