When to use it
Final onboarding step before the dashboard if billing is required.
- Plan picked in <30s
- Yearly savings visible at a glance
Layout regions
- header
- main
States
- default
- loading
Example
<Container variant="md"><Stack size="4"><h1>Choose your plan</h1><Stack variant="responsive" size="4"><PlanCard plan="monthly" price="$29" /><PlanCard plan="yearly" price="$290" badge="Save 17%" /></Stack><Button>Continue to checkout</Button></Stack></Container>The full Plan selection pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.