Role Swimlane Grid

Workflow52: Role Swimlane Grid

A responsibility swimlane crossing roles against stages, filling every cell by whether that role owns, helps, only reads or has no access, with a legend keyed to the same tints.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/workflow52?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/workflow52?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/workflow52.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports workflow52Demo alongside the block: the exact props behind the preview above. Spread it to get a working grid in one line.

import { Workflow52, workflow52Demo } from "@/components/beste/block/workflow52";

export default function ResponsibilitiesPage() {
  return <Workflow52 {...workflow52Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Workflow52 } from "@/components/beste/block/workflow52";

export default function ResponsibilitiesPage() {
  return (
    <Workflow52
      badge={{ label: "Who touches what" }}
      heading="Five stages, four roles, and no gap where nobody is responsible"
      description="Every column has exactly one owner."
      stages={["Referral", "Booking", "Visit", "Notes", "Billing"]}
      lanes={[
        {
          role: "Reception",
          detail: "The front desk, whoever is on shift",
          stages: ["owns", "owns", "helps", "none", "sees"],
        },
        {
          role: "Finance",
          detail: "Invoices, insurers, and month-end",
          stages: ["none", "none", "none", "none", "owns"],
        },
      ]}
      legend={[
        { key: "owns", label: "Owns the stage" },
        { key: "helps", label: "Steps in when asked" },
        { key: "sees", label: "Can read it, cannot change it" },
        { key: "none", label: "No access at all" },
      ]}
      footnote="Access follows this grid exactly."
      button={{ label: "See how roles are set", href: "/security/roles" }}
    />
  );
}

Props

type Involvement = "owns" | "helps" | "sees" | "none";

type ActionLink = {
  label: string;
  href: string;
};

type Lane = {
  role: string;
  detail: string;
  stages: Involvement[];
};

Behavior notes

• Each lane's stages array must line up with the stages column list by position. A short array simply renders fewer cells and leaves the row ragged.
• Cells carry a word as well as a tint, taken from the internal cellMark table, so the grid reads without relying on colour. The none state renders a dashed outline and an em dash rather than an empty cell, which distinguishes "no access" from "not filled in".
• The legend is driven by the same Involvement keys, so its swatches can never disagree with the grid.
• This is a real table with scope="col" and scope="row" headers, so a screen reader announces each cell with its role and stage.
• The role th contains two lines, and the second carries an explicit font-normal. A th inherits bold from the browser default and Tailwind's Preflight does not reset it, so without that class the detail line would render bold.
• The demo's constraint, exactly one owns per column, is authored rather than enforced. Nothing in the block validates it, but it is the rule the layout is designed to make visible.
• Cells are fixed at h-11, so the grid stays even whatever word each holds.