Upgrade Plan Dialog
A plan limit dialog with per resource usage meters, a bordered next tier card listing features and price, and a prorated billing note.
A plan limit dialog with per resource usage meters, a bordered next tier card listing features and price, and a prorated billing note.
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
Upgrade Plan Dialog is the static blueprint for the moment a workspace hits its tier ceiling. The heading states the Starter limits are reached, and the subtext names the trigger, an 11th project. Three usage meters show exactly where the workspace stands: projects and members both pinned at their cap, storage at 8.2 of 10 GB. A bordered card presents the Growth plan with its price and four things the upgrade unlocks, and a muted callout spells out the billing math: the change takes effect immediately, with a prorated charge for the 18 days left in the cycle and nothing in the workspace touched.
The usage rows and Growth features are typed arrays, the meters are shadcn Progress components, and the whole dialog is static markup with no Radix portal opened, so it renders correctly inside the preview iframe. The copy does the persuading by naming the exact wall the user just hit.
Reach for this block as the paywall that appears when an action exceeds the current plan, not as a generic pricing page. Feed the meters from live usage, populate the next tier from your billing catalog, and send the upgrade action to your checkout or plan change endpoint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a project cap upgrade prompt with usage meters. Other plan gate dialogs:
Tip: show the meters that are already full, the visible caps make the upgrade feel earned rather than pushed.