# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/workflow56. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Workflow](/blocks/workflow)
5. /
6. Public Writing Board

# Public Writing Board[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/workflow56`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type      | Default | Description                              |
| ----------- | --------- | ------- | ---------------------------------------- |
| eyebrow     | string    | –       | Badge6 label above the hairline rule     |
| heading     | string    | –       | Section heading under the rule           |
| description | string    | –       | Supporting paragraph                     |
| stages      | Stage\[\] | \[\]    | Board columns, left to right             |
| emptyLabel  | string    | –       | Sentence shown in a column with no cards |
| className   | string    | –       | Extra classes for the outer section      |

tsCopy

```
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.

## More Workflow blocks

[View all Workflow](/blocks/workflow)

[](/block/workflow40)

PRO

workflow40

### Process Board

A kanban-style board showing studio work moving across stage columns.

[](/block/workflow19)

PRO

workflow19

### Workflow Onboarding Checklist

Onboarding card with a progress bar and a six-step checklist. Each step shows a completion state, a title, and a short hint.

[](/block/workflow1)

PRO

workflow1

### Hero with Workflow Recipe

Two-column workflow hero with a live automation recipe card on the right showing a multi-app stack and installs counter.

[](/block/workflow4)

PRO

workflow4

### Workflow Stats With Live Tiles

Three-column stats strip where each metric is anchored by a real workflow piece: active runs, success rate, and approvals.

[](/block/workflow17)

PRO

workflow17

### Workflow Analytics Dashboard

Full-width analytics card with four KPI tiles, a CSS bar chart of the last 30 days, and a top-workflows leaderboard with share bars.

[](/block/workflow12)

PRO

workflow12

### Workflow Canvas Hero

Hero with a full canvas on the right showing a real workflow flow: trigger node, condition node, and two action branches connected with lines.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.