shadcn.io is not affiliated with official shadcn/ui
Quota Limit Alert Billing Block for React
An image editor's credits chip that opens a popover shown open in place: credits left in a bar, the reset day, an overage switch whose sentence flips, and a button that buys 1,000 more and moves the chip.
Installation
Overview
Put the balance where people feel it run low, with this quota limit alert for React with Base UI. It opens from the generative fill page of Pixelhollow, an image editor with AI credits: the header's outline Button is a chip that reads "3,420 left", and the editor is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Popover shows what is left of the month's 5,000 credits in a Progress bar, when they reset (Nov 1, in 17 days), a Switch named "Allow overage up to $20" whose sentence flips between "Past zero, extra credits cost $0.02 each, capped at $20" and "Past zero, generating stops until Nov 1", and the only Shine Button: "Buy 1,000 credits, $10". Buying raises the count in the bar, the popover and the chip together and keeps the popover open. For preview the popover is drawn open in place at the end of the frame when the page loads; the chip opens the real Popover, with the same state. For editors, AI tools and any product that spends credits.
FAQ
Why is the popover already open, and what do I keep?
So you can see it without a click. On load the popover is a copy drawn in place under the header: a native dialog element that isn't modal, so nothing is trapped or focused. The chip opens the real Popover, which isn't modal either: Escape closes it and focus goes back to the chip, and the copy stays closed until a reload. Both show the same QuotaFields and share the block's state. In your app keep the Popover and drop the copy: the "in-place" state, the dialog and the Escape effect.
What does the switch change?
Only the sentence under it, in a slot that holds three lines so nothing moves: with overage on, credits past zero cost $0.02 each up to a $20 cap (1,000 credits); with it off, generating stops until the reset. The block doesn't enforce either; send the choice to your billing service. The switch is named, in foreground tones, and the status line speaks the new sentence.
What does Buy do?
It adds a pack of 1,000 credits to the count: the chip, the figure beside the bar and the bar itself all move, and the status line says "Added 1,000 credits in this demo" with the new total. The bar's total grows with each pack, so it never overfills. Nothing is charged; wire the button to your checkout and update the count from the response.
Is it accessible from the keyboard?
Yes. The popover is named "Credits left this month", Tab moves through the switch and the button, and Escape closes it and returns focus to the chip. The bar is decorative and the same numbers are in text beside it. The trigger is passed to PopoverTrigger through render, and the popover is controlled with open and onOpenChange.
What stays local in the demo?
The balance, the pack and the prices are typed, and the reset date is worked out from a fixed day. Nothing is bought, charged or enforced. Load the balance from your account, post the overage choice and the purchase to your server, and recompute the reset date from the billing cycle.