Step Plan Outline React component
Review an AI agent's plan before it starts: reorder steps, skip the optional ones, watch the time and cost update, then approve and follow it through.
About the Step Plan Outline component
Step Plan Outline gives people a say before an agent starts work. The plan is laid out in order, with what each step will do, how long it should take and what it costs.
Move steps, skip the ones you don't want and see the totals change. When it looks right, approve it and follow each step through to the end.
When to use it
Use it wherever an agent proposes a plan, especially before work that's slow, costly or hard to undo.
Keep steps meaningful. Twenty small steps are harder to judge than five clear ones.
Installation
Add the Step Plan Outline component to your project with the shadcn CLI. It lands in components/step-plan-outline.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/step-plan-outlineProps
<StepPlanOutline /> accepts 6 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 | "Plan: move invoices to the new API" |
| author Who wrote the plan. | string | "Written by Patch. Change anything before it starts." |
| steps | { id: string; title: string; detail: string; minutes: number; cost: number; required?: boolean }[] | DEFAULT_STEPS |
| stepMs Milliseconds per step once it's running. | number | 800 |
| onApprove | (ids: string[]) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Plan: move invoices to the new API"
- author
Who wrote the plan.
stringDefault: "Written by Patch. Change anything before it starts." - steps{ id: string; title: string; detail: string; minutes: number; cost: number; required?: boolean }[]Default: DEFAULT_STEPS
- stepMs
Milliseconds per step once it's running.
numberDefault: 800 - onApprove(ids: string[]) => void
Step Plan Outline FAQ
- Can every step be skipped?
- No. Steps marked required stay in the plan.
- Does Approve run anything?
- No. onApprove gives you the steps in order, and the card shows a demo run.
- Can I use the keyboard?
- Yes. Every move and skip control is a normal button.
- Does the height change?
- No. Rows sit at fixed positions.
