Public Writing Board

Workflow56: Public Writing Board

A four column board showing the real work in progress, each column stating the rule that lets a piece move on and carrying the linked cards currently sitting in it, with a written state for a column that is empty.

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/workflow56?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/workflow56.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Workflow56, workflow56Demo } from "@/components/beste/block/workflow56";

export default function BoardPage() {
  return <Workflow56 {...workflow56Demo} />;
}

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

import { Workflow56 } from "@/components/beste/block/workflow56";

export default function BoardPage() {
  return (
    <Workflow56
      eyebrow="The board"
      heading="Everything we are writing, in the open"
      description="A piece only moves right when the rule under the column is met."
      emptyLabel="Nothing here this week"
      stages={[
        {
          name: "Drafting",
          rule: "One per person at a time, no exceptions.",
          pieces: [
            { title: "The month after launch", meta: "Second draft, 1,900 words", href: "/board/launch" },
          ],
        },
        {
          name: "Published",
          rule: "Corrections go in the revision log, not in silence.",
          pieces: [{ title: "Two weeks of overlap", meta: "11 March", href: "/letters/041" }],
        },
      ]}
    />
  );
}

Props

type Stage = {
  name: string;
  rule: string;
  pieces: PipelinePiece[];
};

type PipelinePiece = {
  title: string;
  meta: string;
  href: string;
};

Behavior notes

• Columns use grid-rows-subgrid, so the heading row, the rule and the first card line up across all four columns however long a rule wraps. Without it the cards would start at a different height in every column.
• The column count in the header is pieces.length, so it cannot fall out of step with the cards under it.
• Every card links out, which is what makes the board a way into the work rather than a picture of it.
• The board scrolls horizontally under min-w-[52rem] instead of stacking, so the left to right order of the stages survives on a phone.
• emptyLabel renders in a dashed box, so an empty stage reads as deliberate rather than broken.