Roles Matrix

"use client"

import {
  ChartBarIcon,
  GearIcon,
  ShieldIcon,
  UsersIcon,
} from "@phosphor-icons/react"
import * as React from "react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,

A permissions matrix with a checkbox for every permission and role, grouped by area, and a Save button that enables after a change. The Admin column is fixed. On narrow screens the grid keeps its width and scrolls sideways. Use it when admins need to compare all roles at once rather than edit one at a time.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/roles-matrix

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks roles-matrix

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react

2. Add the pieces it builds on: Button, Checkbox, Sidebar.

3. Copy the source into components/blocks/roles-matrix.tsx:

"use client"

import {
  ChartBarIcon,
  GearIcon,
  ShieldIcon,
  UsersIcon,
} from "@phosphor-icons/react"
import * as React from "react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,

4. Update the import paths to match your project.

Usage

import { RolesMatrix } from "@/components/blocks/roles-matrix"

<RolesMatrix />

Edit roles for the columns and groups for the rows; each permission has a name and a grants array of 1 or 0 per role, in role order. The first column is always disabled. Replace the Save handler, which only toggles local flags, with your API call.

Notes

Each checkbox is labeled with its group, permission and role, so cells make sense without the visual header row.