AI & Agents
Plan Summary
A plan on one card before it runs: goal, steps, time, cost, tools and phases.
Usage
Ship the Tabs v2 release
Drafted 3 min ago from the release notes
- Steps
- 7
- Est. time
- 18 min
- Est. cost
- $0.42
Tools
Phases
- Map the old icons3 steps
- Swap the components4 steps
- Publish and announce3 steps
Installation
npm install @wunderui/reactThen import what you need:
import { PlanSummary, PlanSummaryPhase, PlanSummaryStat } from "@wunderui/react"Examples
Plan summary
Goal, estimates, the tools the run will use and its phases — Run plan starts it.
Ship the Tabs v2 release
Drafted 3 min ago from the release notes
- Steps
- 7
- Est. time
- 18 min
- Est. cost
- $0.42
Tools
Phases
- Map the old icons3 steps
- Swap the components4 steps
- Publish and announce3 steps
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Review before you run
A plan summary next to an editable agent plan: check the estimate, then change the order, skip or add steps and start.
Ship the Tabs v2 release
Drafted 3 min ago from the release notes
- Steps
- 7
- Est. time
- 18 min
- Est. cost
- $0.42
Tools
Phases
- Map the old icons3 steps
- Swap the components4 steps
- Publish and announce3 steps
Before the run
4 to run · 1 skipped
- 1Read the release notes
- 2Bump the package versions
- 3Regenerate the changelog (skipped)
- 4Publish to npm
- 5Announce in #releases
Drag to change the order. Skipped steps stay in the plan.
API Reference
| Prop | Type | Default |
|---|---|---|
| goal | ReactNode | — |
| description | ReactNode | — |
| stats | { label: string; value: ReactNode }[] | — |
| tools | string[] | — |
| phases | { title: ReactNode; steps: number | ReactNode }[] | — |
| onEdit / onRun | () => void | — |
| editLabel / runLabel | string | "Edit plan" / "Run plan" |