onboarding pattern
Plan selection
Confirm the plan during onboarding before checkout.
When to use it
Final onboarding step before the dashboard if billing is required.
- Plan confirmed in <30s
- Price + guarantee clear at a glance
Layout regions
- header
- main
- Plan card(s) + checkout CTA
States
- default
- Plan shown with price + guarantee
- loading
- Redirecting to checkout
Example
<Container variant="md"><Stack size="4"><h1>Choose your plan</h1><PlanCard plan="pro" price="$29" badge="Most popular" /><Button>Continue to checkout</Button><p>14-day money-back guarantee.</p></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.