Shown when a usage limit is reached: a segmented meter that fills to the red, a queued overflow tag, a billing switch with a sliding thumb and plan cards whose prices roll and whose features check in one by one.
npx shadcn@latest add https://hyperblur.dev/r/popup-upgrade-limit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-upgrade-limit.tsx.
import { PopupUpgradeLimit } from "@/components/hyperblur/popup-upgrade-limit"
<PopupUpgradeLimit open={limitHit} onOpenChange={setLimitHit} onUpgrade={(plan, billing) => checkout(plan, billing)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "You have used every render minute" | Heading. |
| usage | { label; plan; used; limit; unit; queued?; resets } | 600 of 600 render minutes | Current usage shown in the meter. |
| plans | PopupUpgradePlan[] | Pro and Team | { id, name, monthly, yearly, allowance, features, badge? }. Prices are per month. |
| defaultPlan | string | first plan | Plan selected at first. |
| defaultBilling | "monthly" | "yearly" | "yearly" | Billing period selected at first. |
| currency | string | "USD" | Currency for Intl.NumberFormat. |
| locale | string | "en-US" | Locale for Intl.NumberFormat. |
| onUpgrade | (planId: string, billing: "monthly" | "yearly") => void | Called by the upgrade button. | |
| onDismiss | () => void | Called by Remind me tomorrow. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on the close button, Escape, the backdrop and the main actions. | |
| showTrigger | boolean | true | Render the built-in trigger button. Turn it off when you open the popup from your own code. |
| triggerLabel | string | "Export video" | Text of the built-in trigger button. |
| embedded | boolean | false | Render the panel in place instead of a fixed overlay: no backdrop, no scroll lock and no focus trap, for previews and docs. |
| accent | string | "#8b7bff" | Selected plan, checks and button color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |