Spiral Progress Chart React component
A long project as one spiral path: progress winds out from the centre, milestones sit along the way, and a second marker shows where the plan says you should be.
About the Spiral Progress Chart component
Spiral Progress Chart shows a long project as a single journey. The path winds out from the first idea at the centre to the release at the edge, and the finished part fills in as you go, so a big plan fits in a small square.
Milestones sit along the path and tick off as you pass them, and a dashed ring marks where the plan says you should be today. The stats say whether you are ahead or behind and what comes next.
When to use it
Use it for roadmaps, migrations, courses and fundraising, where a long journey has a handful of clear stops.
For a short task with no milestones, a plain progress bar is enough.
Installation
Add the Spiral Progress Chart component to your project with the shadcn CLI. It lands in components/spiral-progress-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/spiral-progress-chartProps
<SpiralProgressChart /> 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 | "Road to launch" |
| subtitle | string | "From the first idea at the centre to the release at the edge." |
| views | { label: string; progress: number; pace?: number; milestones: SpiralMilestone[] }[] | VIEWS |
| defaultView Index of the view shown first. | number | 0 |
| color Colour of the finished part of the path. | string | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Road to launch"
- subtitlestringDefault: "From the first idea at the centre to the release at the edge."
- views{ label: string; progress: number; pace?: number; milestones: SpiralMilestone[] }[]Default: VIEWS
- defaultView
Index of the view shown first.
numberDefault: 0 - color
Colour of the finished part of the path.
string
Spiral Progress Chart FAQ
- What do progress and pace mean?
- progress is how far you are and pace is where the plan says you should be, both from 0 to 1. Leave pace out to hide the difference.
- Are positions on the path even?
- Yes. They are measured by distance along the spiral, so 0.5 is half the drawn length rather than half the turns.
- Can I show more than one project?
- Yes. Each entry in views is a project, and the pills switch between them.
- What happens with reduced motion?
- The fill appears at once and the head stops pulsing.
