Role & Permission Matrix

An editable matrix for managing role permissions. Toggle permissions on/off for each role with visual indicators and category grouping.

Preview

States

Loading

Features

Role icons with color-coded backgrounds (Crown for owner, Shield for admin, etc.)
Role type badges with matching colors
Editable permission checkboxes
Owner role has all permissions enabled but disabled (not editable)
Permission categories for visual grouping
Tooltip descriptions for permissions
Loading skeleton state
Responsive horizontal scroll for many permissions

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
role-permission-matrix.tsx	components/user-management/role-permission-matrix/role-permission-matrix.tsx
role-row.tsx	components/user-management/role-permission-matrix/role-row.tsx
types.ts	components/user-management/role-permission-matrix/types.ts
index.ts	components/user-management/role-permission-matrix/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add checkbox table

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. role-permission-matrix.tsx

role-permission-matrix.tsx

tsx

"use client";

import { ShieldCheck, Info, Crown, ShieldStar as Shield, UsersThree as Users, Eye, Gear as Settings } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";

2. role-row.tsx

role-row.tsx

tsx

"use client";

import { Crown, ShieldStar as Shield, UsersThree as Users, Eye, Gear as Settings } from "@phosphor-icons/react";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";

3. types.ts

types.ts

tsx

export type RoleType = "owner" | "admin" | "member" | "viewer" | "custom";

export interface Permission {
  id: string;
  name: string;

4. index.ts

index.ts

tsx

export { RolePermissionMatrix } from "./role-permission-matrix";
export { RoleRow } from "./role-row";
export type {
  Role,
  RoleType,
  Permission,
  RolePermissionMatrixProps,
  RoleRowProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/settings.tsx

tsx

"use client";

import { useState } from "react";
import { RolePermissionMatrix, type Role, type Permission } from "@/components/user-management";

RolePermissionMatrix Props

Prop	Type	Default
roles	Role[]	required
permissions	Permission[]	required
onPermissionChange	(roleId: string, permissionId: string, enabled: boolean) => void	required
isLoading	boolean	false