94 Pro components and page blocks

Get Pro
uibrik

Permissions Matrix

Pro

Preview

Customize

Row height44px

Installation

Pro

Permissions Matrix is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/permissions-matrix

Usage

import { PermissionsMatrix } from "@/components/uibrik/permissions-matrix/permissions-matrix";​const roles = [  { id: "owner", label: "Owner", icon: <IconCrownFilled />, locked: true },  { id: "admin", label: "Admin", icon: <IconShieldFilled /> },  // …3 more];​const groups = [  {    id: "projects",    label: "Projects",    permissions: [      { id: "projects.view", label: "View projects" },      { id: "projects.edit", label: "Edit projects", requires: ["projects.view"] },      { id: "projects.delete", label: "Delete projects", description: "Moves to trash for 30 days", requires: ["projects.edit"] },    ],  },  {    id: "team",    label: "Team",    permissions: [      { id: "team.view", label: "See members" },      { id: "team.invite", label: "Invite members", requires: ["team.view"] },      { id: "team.roles", label: "Change roles", requires: ["team.invite"] },    ],  },  // …1 more];​<PermissionsMatrix  roles={roles}  groups={groups}  cascade  crosshair  rowHeight={44}  defaultValue={{}}  label="Permissions"  onSave={(grants, changes) => {}}  onDraftChange={(grants) => {}}  // value={{}}  // maxHeight={0}/>

Props

PermissionsMatrix
cascade
Type boolean
true
Follow requirements: granting a permission grants what it needs, revoking one revokes what depends on it.
crosshair
Type boolean
true
Light the hovered cell's row and column.
rowHeight
Type number
44
Height of each permission row.
rolesrequired
Type { id; label; description?; icon?; locked? }[]
–
One column per role. A locked role is shown but can't be edited.
groupsrequired
Type { id; label; permissions: { id; label; description?; requires? }[] }[]
–
Rows, grouped. `requires` lists permission ids this one can't work without.
value
Type Record<roleId, permissionId[]>
–
Saved grants, controlled. Update it once onSave resolves.
defaultValue
Type Record<roleId, permissionId[]>
–
Saved grants on mount when uncontrolled.
onSave
Type (grants, changes) => void | Promise
–
Commit the draft. A promise shows the saving state; a rejection keeps the draft and offers Retry.
onDraftChange
Type (grants) => void
–
Called with the draft on every edit.
maxHeight
Type number
–
Cap the grid's height; it scrolls under a sticky header.
label
Type string
"Permissions"
Accessible name for the grid.
className
Type string
–
Classes for the outer shell.