Choose a plan
A click picks a plan, and the ring moves to it.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/choose-plan.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- three plans sit side by side, the middle one chosen.
- a click on the biggest plan moves the ring to it.
- the cursor picks the smallest, then comes back to the middle.
Where it fits
For subscription and SaaS products: the empty state an account sees before it has a plan, the billing page in settings, or a section on how pricing grows with a team. Three plans of growing size, with the ring moving to each one clicked, show that picking a plan is one choice that can change later. As a spot it fits above a short line and a View plans button. It is free to copy and pairs with Start a free trial, Plan upgrade and Usage meter.
Pairs well with Start a free trial, Plan upgrade and Usage meter.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 3.1 KB gzipped
- Motion
- Plays once, 4.4 s, then holds
- Reduced motion
- Shows a still
- File
- choose-plan.svg