Three Phase Rollout Timeline

Workflow47: Three Phase Rollout Timeline

Implementation timeline laid out as three hairline columns, each opening with a week marker over a phase title, a short explanation of what happens, and a checked list of what you get out of it, closing on a soft summary strip with the headline commitment and a CTA.

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

Base UI flavor

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

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

Quick start

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

import { Workflow47, workflow47Demo } from "@/components/beste/block/workflow47";

export default function Page() {
  return <Workflow47 {...workflow47Demo} />;
}

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

import { Workflow47 } from "@/components/beste/block/workflow47";

export default function Page() {
  return (
    <Workflow47
      badge={{ label: "Rollout" }}
      heading="Four weeks from signature to a normal Monday"
      description="Each phase has one owner on our side and one on yours."
      items={[
        {
          duration: "Week 1",
          title: "Shape the workspace",
          description: "We map your services, rooms, and roles onto the product with you.",
          deliverables: ["Services and durations", "Rooms and locations"],
        },
        {
          duration: "Week 2",
          title: "Bring the records across",
          description: "Members and open invoices import from your export.",
          deliverables: ["Member import", "Balance reconciliation"],
        },
        {
          duration: "Weeks 3 and 4",
          title: "Train, then go live quietly",
          description: "Two short sessions per team, then one day run in parallel.",
          deliverables: ["A session per team", "Cutover checklist"],
        },
      ]}
      summary={{
        label: "Typical go-live is four weeks, without pausing a clinic day.",
        button: { label: "See a rollout plan", href: "/rollout" },
      }}
    />
  );
}

Props

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

type Phase = {
  duration: string;
  title: string;
  description: string;
  deliverables?: string[];
};

Behavior notes

• The grid is fixed at md:grid-cols-3, so the layout is built for three phases. Passing four leaves one on a second row of its own, and passing two leaves a gap on the right.
• duration is free text rather than a week number, which is what lets one column read Week 1 and another cover a span like Weeks 3 and 4 without the block computing anything.
• Each column is marked only by the hairline rule above it, with no dot or connector drawn between columns, so the sequence is carried by the week markers rather than by ornament.
• The deliverables list sits under its own rule inside the column, which keeps the promise separate from the explanation above it even when the descriptions run to different lengths.
• Deliverables are optional per phase: a column without them simply ends after its description, and the rule above the list is not drawn.
• The summary strip is a solid bg-muted fill with the line set at display size, so the closing commitment reads as a statement rather than as another phase.