Launch Phase Timeline React component
Roll out an AI feature in safe steps: a stepped curve of who has it, the checks each phase must pass, and controls to open it wider or roll it back.
About the Launch Phase Timeline component
Launch Phase Timeline turns a rollout into a series of safe steps. The curve shows who has the feature today and what's planned, and each phase lists the checks it has to pass before more people get it.
A failing check holds the button back, so nobody opens a launch wider by mistake. If something goes wrong, Roll back steps down a phase.
When to use it
Use it for AI features, model upgrades and any staged release with clear limits.
Pick checks you'd really stop a launch for. A long list of soft targets only teaches people to ignore it.
Installation
Add the Launch Phase Timeline component to your project with the shadcn CLI. It lands in components/launch-phase-timeline.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/launch-phase-timelineProps
<LaunchPhaseTimeline /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Roll out the new support assistant" |
| subtitle | string | "Each phase opens only when its checks pass." |
| phases In rollout order. | { id: string; label: string; audience: string; rollout: number; dates: string; gates: PhaseGate[] }[] | DEFAULT_PHASES |
| defaultPhase Which phase is live at the start, from 0. | number | 2 |
| checkMs How long a check takes, in milliseconds. | number | 1100 |
| onPromote | (phase: LaunchPhase) => void | — |
| onRollBack | (phase: LaunchPhase) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Roll out the new support assistant"
- subtitlestringDefault: "Each phase opens only when its checks pass."
- phases
In rollout order.
{ id: string; label: string; audience: string; rollout: number; dates: string; gates: PhaseGate[] }[]Default: DEFAULT_PHASES - defaultPhase
Which phase is live at the start, from 0.
numberDefault: 2 - checkMs
How long a check takes, in milliseconds.
numberDefault: 1100 - onPromote(phase: LaunchPhase) => void
- onRollBack(phase: LaunchPhase) => void
Launch Phase Timeline FAQ
- Does it change who has the feature?
- No. onPromote and onRollBack tell you what was chosen, and your release tool does the rest.
- Why is the open button greyed out?
- At least one check on the live phase is failing. Fix it and run the checks again.
- What does recheck do?
- It's the reading a gate shows after Run checks. Leave it out if the reading won't change.
- Does the height change between phases?
- No. Every phase shares one grid cell.
