shadcn.io is not affiliated with official shadcn/ui
Limit Reached Billing Block for Vue
The upgrade prompt shown where someone hits a plan limit: what was blocked, the limit reached against the next plan's, a two-column comparison and Upgrade or Remind me later.
Installation
Overview
Turn a blocked action into a clear next step, inside your app, with this limit prompt for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three bands. The first is an Empty state: a small icon tile, a heading naming what didn't go through ("Create project “Q4 launch” didn’t go through") and a sentence on the limit reached and the way out. The second compares the current plan and the next as two Data Lists, each with an outline Badge, and sets the limit that blocked the action in heavier type in both columns. The third holds a Shine Button to upgrade, the only colored control, and a ghost "Remind me later" Button that sets a reminder and turns into "Undo reminder". Each band's top rule is drawn with Guides, with a plus where it meets the frame. It uses one piece of state, for the reminder, and a CSS entrance only. For free-plan limits, paywalls inside an app and upgrade dialogs.
FAQ
How do I fill it with the limit someone hit?
Two constants at the top of the file hold everything. BLOCKED has the action that was refused, the plan's limit and the ISO date a reminder lands on. COLUMNS has the two plans: their name, price line, badge text and three limit rows, the first of which is the one that blocked. Replace them with what your backend returns for the account and the limit, and pass them in as props if the prompt is rendered where the check fails.
What does Remind me later do?
It flips the reminder on or off in the block's own state: the line beside the buttons changes to "We’ll remind you on Monday, October 19." and the button reads "Undo reminder". Nothing is stored, so schedule the reminder in your own code from the same handler, toggleReminder. The line is a polite live region, so a screen reader announces the change, and focus stays on the button, which keeps its place.
Where does this prompt go?
Wherever the limit is hit: inline where the new-project button was, in the place of the blocked page, or inside a dialog. It has no page spine, only its own frame, so it sits inside whatever surface your app gives it. Pair it with a usage meters section, which shows a limit coming before it is reached.
What does a screen reader hear?
The section is headed by an h2; the blocked action and each plan are h3s, and each plan is a labelled section with its limits as a description list, so a value is read with its term. The icon is decorative and hidden. The current-plan and next-plan badges are text, so the comparison doesn't depend on position or color.