Deck

Stages slide

A slide title over a horizontal run of numbered stages on the VI canvas. Left-to-right order is the timeline itself, so there are no arrows or connectors; the ordinal is computed and zero-padded, never authored.

Install

npx shadcn@latest add @alix/stagesSlide

Preview

01Weeks 1–2

Find the cash

Map where working capital is trapped.

02Weeks 3–6

Set the floor

Enforce the decisions already made.

03Weeks 7–12

Hold the line

Bank the run-rate and prove it.

The first ninety days

Illustrative

Usage

import { StagesSlide } from "@/components/deck/stagesSlide";

<StagesSlide
  title="The first ninety days"
  stages={[
    { marker: "Weeks 1–2", title: "Find the cash", text: "Map where working capital is trapped." },
    { marker: "Weeks 3–6", title: "Set the floor", text: "Enforce the decisions already made." },
    { marker: "Weeks 7–12", title: "Hold the line", text: "Bank the run-rate and prove it." },
  ]}
/>

Examples

Four stages, markerless

marker is optional per stage; drop it and the computed ordinal carries the sequence alone. The grid takes its column count from the data.

Diagnose

Where the margin actually leaks.

Prioritise

The moves that pay back first.

Enforce

Owners, floors, and approvals.

Prove

Run-rate banked in the accounts.

The anatomy of the decision

<StagesSlide
  title="The anatomy of the decision"
  stages={[
    { title: "Diagnose", text: "Where the margin actually leaks." },
    { title: "Prioritise", text: "The moves that pay back first." },
    { title: "Enforce", text: "Owners, floors, and approvals." },
    { title: "Prove", text: "Run-rate banked in the accounts." },
  ]}
/>

Markers, titles only

The support line is optional too: a phase tag and a verb read as a lean roadmap.

01Q1

Pilot one region

02Q2

Scale to all sites

03Q3

Embed and hand over

The rollout

<StagesSlide
  title="The rollout"
  stages={[
    { marker: "Q1", title: "Pilot one region" },
    { marker: "Q2", title: "Scale to all sites" },
    { marker: "Q3", title: "Embed and hand over" },
  ]}
/>

When to use it

Use it for

An ordered progression: programme phases, a decision's anatomy, the first 100 days. 3–5 stages.
marker for a time tag (a phase, a date range); the ordinal number is computed.
A short verb-led stage title with an optional one-line support clause.

Reach for something else

Writing "1." into a stage title. Numbering is computed and zero-padded.
Arrows or connectors between stages: the left-to-right order is the timeline.
Points with no sequence: use KeyPointsSlide.

Props

Prop	Type	Default	Description
title	string	–	The slide title, on the canvas title row.
stages	{ marker?: string; title: string; text?: string }[]	–	Ordered stages: the array order is the timeline. marker is a short tag (a phase, a date range); the ordinal is computed, never authored. text is an optional support clause.
meta	string[]	–	Deck chrome / source for the footer meta row.