# Choose a plan

Choose a plan: a click picks a plan, and the ring moves to it.

- Theme: Interface
- Size: spot
- Access: Free
- Page: https://illos.dev/library/interface/choose-plan
- Preview image: https://media.illos.dev/previews/b2f91d84/flat/choose-plan.light.1600.webp
- SVG: https://illos.dev/assets/styles/flat/choose-plan.svg
- Add to a React project: `npx shadcn@latest add https://illos.dev/r/flat/choose-plan.json`

On the page, Copy gives the SVG and Download the file.

## How it moves

1. three plans sit side by side, the middle one chosen.
2. a click on the biggest plan moves the ring to it.
3. 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 (https://illos.dev/library/interface/free-trial.md), Plan upgrade (https://illos.dev/library/interface/plan-upgrade.md), Usage meter (https://illos.dev/library/interface/usage-meter.md)

## Related

- [Interface illustrations](https://illos.dev/library/interface)
- [Free illustrations](https://illos.dev/library/free)
- [All illustrations](https://illos.dev/library)