Permission Matrix

Role and access management grid of roles against permissions, with tri-state group toggles, sticky headers, and inherited permissions.

@drift-ui/permission-matrixRegistry JSON GitHub Open in v0

DirectInherited

Permissions	ViewerRead-only access	Editorinherits Viewer	Managerinherits Editor, Viewer	Admininherits Manager, Editor, Viewer
Projects4
View ProjectsBrowse and open projects
Create ProjectsInitialize new projects
Edit ProjectsModify project settings and tasks
Delete ProjectsArchive or permanently remove
Team Members3
View MembersSee list of workspace users
Invite MembersSend invitations to join
Manage RolesChange member permissions
Billing & Plans2
View InvoicesDownload billing statements
Change PlanUpgrade or modify payment card
Security & API2
Manage API KeysGenerate and rotate API secrets
Audit LogsInspect access log history

Keyboard

↑↓←→: Move between cells
HomeEnd: First or last column
PageUpPageDown: First or last row
SpaceEnter: Toggle the permission

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

permission-matrix-usage.tsx

"use client"

import * as React from "react"
import { PermissionMatrix } from "@/components/ui/permission-matrix"

const ROLES = [
  { id: "viewer", name: "Viewer" },
  { id: "editor", name: "Editor", inheritsFrom: "viewer" },
  { id: "admin", name: "Admin", inheritsFrom: "editor" },
]

const PERMISSIONS = [
  {
    id: "docs",
    name: "Documents",
    permissions: [
      { id: "docs.read", name: "Read" },
      { id: "docs.write", name: "Write" },
      { id: "docs.delete", name: "Delete" },
    ],
  },
]

export function AccessSettings() {
  const [grants, setGrants] = React.useState({
    viewer: ["docs.read"],
    editor: ["docs.write"],
    admin: ["docs.delete"],
  })

  return (
    <PermissionMatrix
      roles={ROLES}
      permissions={PERMISSIONS}
      value={grants}
      onValueChange={setGrants}
    />
  )
}

PermissionMatrix

A role and access management matrix that maps roles against grouped permissions. Supports tri-state group toggles, recursive role inheritance, sticky headers, and 2D WAI-ARIA grid keyboard navigation.

Prop	Type	Default
`allowOverrideInheritedboolean`Default`true`Whether inherited permissions can be directly toggled or overridden.	`boolean`	`true`
`defaultExpandedGroupsstring[]`IDs of permission groups expanded by default.	`string[]`
`defaultValuePermissionGrants`Default`{}`Initial value when uncontrolled.	`PermissionGrants`	`{}`
`disabledboolean`Default`false`Disables interaction across the entire matrix.	`boolean`	`false`
`expandedGroupsstring[]`Controlled array of permission group IDs that are expanded.	`string[]`
`onExpandedGroupsChange(groups: string[]) => void`Callback fired when group expansion state changes.	`(groups: string[]) => void`
`onValueChange(value: PermissionGrants) => void`Called when any grant in the matrix is updated.	`(value: PermissionGrants) => void`
`permissions`Required`PermissionGroup[]`Groups of permission actions displayed in the matrix rows.	`PermissionGroup[]`
`readOnlyboolean`Default`false`Renders the matrix in read-only audit mode without interactive checkboxes.	`boolean`	`false`
`roles`Required`PermissionRole[]`Roles displayed across matrix columns, with optional inheritsFrom inheritance.	`PermissionRole[]`
`searchPlaceholderstring`Default`"Filter permissions..."`Placeholder text for the search filter input.	`string`	`"Filter permissions..."`
`searchableboolean`Default`true`Whether to show the search input above the matrix to filter permissions.	`boolean`	`true`
`valuePermissionGrants`Controlled Controlled grants mapping role ID to an array of permission IDs. A `"!permissionId"` entry explicitly denies a permission the role would otherwise inherit..	`PermissionGrants`

Other props go to the <div>.

Controlled matrix with save action

Manage external state to provide Save and Discard actions when access control policies change.

All permissions synchronized

DirectInherited

Permissions	Viewer	Editorinherits Viewer	Admininherits Editor, Viewer
Content3
Read Content
Write Content
Publish Content
Settings2
View Settings
Update Settings

Read-only access overview

Display fixed permissions for compliance audits without interactive checkboxes.

DirectInherited

Permissions	Guest	Memberinherits Guest	Ownerinherits Member, Guest
Repositories3
Clone & Read
Push Branches
Delete Repository
Issues2
Create Issues
Close Issues

components/ui/permission-matrix.tsx