Not too much or too little in general, just the wrong amount for this piece of work. Four questions put you somewhere on the line, and the line has an honest bottom end.
Who it ends up involving
Every rung up the scale adds a name that has to say yes before the work can move.
A process sizer that answers with a position rather than a verdict: a photographic band opens the section, four weighted questions sit beside an avatar cluster of the people a heavier answer pulls in, they add up to a score, and the band that score falls in takes the page over with its title, its summary, and the practices it asks for.
A process sizer that answers with a position rather than a verdict. A photographic band opens the section, four weighted questions add up to a score, and the band that score lands in takes the page over with its practices.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/workflow55"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/workflow55"That installs the block file, the badge6 eyebrow and button1 seal CTA it is built from, the socialproof24 piece it shows in the banner, and the questionnaire primitive.
import { Workflow55, workflow55Demo } from "@/components/beste/block/workflow55";
export default function Page() {
return <Workflow55 {...workflow55Demo} />;
}import { Workflow55 } from "@/components/beste/block/workflow55";
import { Socialproof24 } from "@/components/beste/piece/socialproof24";
export default function Page() {
return (
<Workflow55
badge={{ label: "How much process" }}
meta="Four questions"
heading="Most teams are running the wrong amount of process"
description="Four questions put you somewhere on the line."
shortcuts="numbers"
image={{
src: "https://images.unsplash.com/photo-1497366216548-37526070297c",
alt: "Empty meeting room with chairs pulled back",
}}
aside={{
title: "Who it ends up involving",
note: "Every rung up the scale adds a name that has to say yes.",
media: (
<Socialproof24
items={[
{
src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
alt: "Portrait of the engineer writing the change",
},
{
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
alt: "Portrait of the approver from the platform team",
// only the member with a name gets the tooltip
name: "Waiting on Dana",
},
]}
/>
),
}}
questions={[
{
name: "blast",
title: "If this goes wrong on a Friday, who notices?",
choices: [
// the heaviest answer in each question sets the ceiling
{ value: "team", label: "The team, and nobody else", weight: 0 },
{ value: "customers", label: "Paying customers, immediately", weight: 4 },
],
},
{
name: "reverse",
title: "How hard is it to undo?",
choices: [
{ value: "easy", label: "One command, under a minute", weight: 0 },
{ value: "never", label: "It cannot be undone", weight: 4 },
],
},
]}
bands={[
{
upTo: 20,
title: "Just ship it",
summary: "Nothing here justifies a process.",
practices: ["One person writes it and one person looks at it"],
button: { label: "See the lightweight kit", href: "https://beste.co" },
},
{
upTo: 100,
title: "Full change control",
summary: "Irreversible and externally visible.",
practices: ["Written change request, approved before any work starts"],
image: {
src: "https://images.unsplash.com/photo-1497366216548-37526070297c",
alt: "Empty meeting room with chairs pulled back",
},
button: { label: "See the change control pack", href: "https://beste.co" },
},
]}
labels={{ submit: "Place me on the line", railTitle: "How much process this needs" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Eyebrow above the rule, rendered with Badge6. |
meta | string | – | Short line beside the eyebrow, across the hairline divider. |
heading | string | – | Section heading. |
description | string | – | Section description under the heading. |
questions | WeightQuestion[] | [] | The questions. Every choice carries the weight it adds. |
shortcuts | "letters" | "numbers" | – | Prints a shortcut on every choice of the active question. |
bands | Band[] | [] | Read in order; the first band whose upTo covers the score wins. Each one is a rung on the ledger. |
image | BandImage | – | Band across the top, shown until the score is placed. |
aside | Aside | – | Small banner beside the questions: a label, a piece, and a line under it. |
labels | Workflow55Labels | {} | Overrides for the buttons, the rail heading, and the score line. |
className | string | – | Merged onto the section element. |
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type BandImage = { src: string; alt: string };
type WeightQuestion = {
name: string;
title: string;
description?: string;
choices?: WeightChoice[];
};
type WeightChoice = {
value: string;
label: string;
description?: string;
weight: number;
};
type Aside = {
title?: string;
note?: string;
media?: ReactNode;
};
type Band = {
upTo: number;
title: string;
summary: string;
practices?: string[];
image?: BandImage;
button?: ActionButton;
};
type Workflow55Labels = {
previous?: string;
next?: string;
submit?: string;
restart?: string;
railTitle?: string;
scoreLabel?: string;
practicesTitle?: string;
};upTo is the upper edge of a band as a percent, and the bands are read in order. The last one should reach 100 or a maximum score has nowhere to land.aside.media, pre-configured in the demo data rather than assembled by the block. Give every embedded piece its full props: a bare one renders the empty defaults and the banner looks broken.image replaces the opening band, which lets the picture get heavier as the process does.workflow38
Process steps cascading in a diagonal staircase with connecting markers.
workflow27
Ascending-staircase process timeline where each phase climbs above the last, with oversized index numerals, cadence labels and per-phase deliverables.
workflow42
Full-width phase bands anchored by oversized ghost numerals with duration meta.