Plan Picker Cards
In-app upgrade surface with Free, Team, and Business plan cards, a monthly/yearly billing toggle, feature lists, and current plan indicator.
In-app upgrade surface with Free, Team, and Business plan cards, a monthly/yearly billing toggle, feature lists, and current plan indicator.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Plan Picker Cards is the in-app upgrade surface, three plan cards (Free, Team, Business) each with the price, a short feature list, and a CTA. The current Team plan card carries a Current badge and a disabled button. Upgrade to Business and Downgrade to Free are the live actions. A monthly/yearly toggle sits above the grid and the yearly savings line, up to 20% compared to paying month to month, appears only when yearly is on.
Plans are one typed array so adding a fourth tier is a single push. The prorated/end-of-period copy at the bottom is the line that prevents the most billing support tickets.
Reach for this block on the billing or subscription settings page, wired to your current plan state and your checkout or portal link. Disable the CTA that matches the active plan; destructive downgrades should route through the downgrade warning panel.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the standard three-tier upgrade surface. Other plan pickers:
Tip: disable the current plan CTA entirely rather than hiding it so users always know where they stand.