PermissionMatrix.

ProBlockAccessv0.2.0

A capability-by-role matrix that labels each cell granted, inherited, not granted or unavailable. Edits are held as unsaved until your server confirms them, and phones show one role at a time.

Get Elements Pro

Demo dataResponsive

Role permissions

Changes take effect only after they are saved and confirmed.

Capability	OwnerLocked	Admin	Member	Viewer
Records
Edit records	Granted
Export recordsCSV and JSON	Granted			Inherited
Workspace
Invite members	Granted
Manage billing	Granted
Configure SSOEnterprise plan	Unavailable	Unavailable	Unavailable	Unavailable

Records

Edit recordsGranted
Export recordsGranted

Workspace

Invite membersGranted
Manage billingGranted
Configure SSOUnavailable

Installation

Add the licensed registry once. Keep your license key in the project’s uncommitted environment.

components.json

{
  "registries": {
    "@elements-pro": {
      "headers": {
        "Authorization": "Bearer ${ELEMENTS_PRO_LICENSE_KEY}"
      },
      "url": "https://pro.elements.micropreneur.dev/r/{name}.json"
    }
  }
}

export ELEMENTS_PRO_LICENSE_KEY=mpro_...

pnpm dlx shadcn@latest add @elements-pro/permission-matrix

The shadcn CLI writes the source into your project. Files added:

components/elements-pro/permission-matrix.tsxblock
components/ui/badge.tsxui
components/ui/button.tsxui
components/ui/card.tsxui
components/ui/native-select.tsxui

Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge

API

Prop	Type	Default	Description
roles (required)	PermissionRole[]	—	Roles, optional inheritance label and locked flag.
capabilities (required)	PermissionCapability[]	—	Grouped capabilities with optional descriptions.
permissions (required)	Record<string, PermissionState>	—	Server state keyed by roleId:capabilityId.
onSave	(changes) => Promise<{ status: "saved" \| "error" }>	—	Persist pending changes; nothing reads as saved before it resolves.

PermissionState

Prop	Type	Default	Description
state (required)	'granted' \| 'inherited' \| 'denied' \| 'unavailable'	—

Accessibility

States are shown in words and icons, not color alone.
Editable cells are toggle buttons with aria-pressed and a label naming the role, capability and state.
The matrix is a real table with row and column headers; phones get a labelled role picker and lists.