BJORK Permissions matrix

Component

About

Permissions matrix is a production-ready tables component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Permissions matrix to your project and fits it to your theme.

Code

How BJORK Permissions matrix is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useSyncExternalStore } from "react";
import { PERMISSIONS_MATRIX_SAMPLE, PermissionsMatrix, type PermissionGrants } from "@/components/ui/bjork-permissions-matrix";

const PREVIEW_DRAFT: PermissionGrants = {
  ...PERMISSIONS_MATRIX_SAMPLE,
  "projects.archive": {
    ...PERMISSIONS_MATRIX_SAMPLE["projects.archive"],
    editor: true,
  },
  "members.invite": {
    ...PERMISSIONS_MATRIX_SAMPLE["members.invite"],
    editor: true,
  },
  "billing.invoices": {
    ...PERMISSIONS_MATRIX_SAMPLE["billing.invoices"],
    admin: false,
  },
};

const narrowQuery = "(max-width: 639px)";

function subscribeNarrow(onChange: () => void) {
  const query = window.matchMedia(narrowQuery);
  query.addEventListener("change", onChange);
  return () => query.removeEventListener("change", onChange);
}

function useNarrowViewport() {
  return useSyncExternalStore(
    subscribeNarrow,
    () => window.matchMedia(narrowQuery).matches,
    () => false,
  );
}
function SourceDemo(){
const isPreview = false;
const narrow = useNarrowViewport() && !isPreview;
const previewTheme = null;
const tableTheme =
    previewTheme === "light" || previewTheme === "dark" ? previewTheme : "auto";
const handleSave = async (grants: PermissionGrants) => {
    await new Promise((resolve) => setTimeout(resolve, 600));
    console.log("Saved permissions:", grants);
  };
return <>

      <div className={narrow ? "w-[calc(100vw-72px)]" : "w-full"}>
        <PermissionsMatrix
          initialDraft={isPreview ? PREVIEW_DRAFT : undefined}
          onSave={handleSave}
          theme={tableTheme}
          enableAnimations={!isPreview}
        />
      </div>
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}