You have used 84% of your API quota

Starter plan · resets in 6 days

842,113 / 1,000,000 requests Resets 1 September

At the limit we start returning 429 instead of dropping requests quietly. Scale raises the ceiling to 25M and adds burst capacity for launch days.

Change alert threshold
">

The prompt

Design an in-product upgrade banner with Tailwind CSS, the kind shown when an account approaches a plan limit. Use a rounded-2xl bordered card with a subtle amber left accent border. The top row pairs a warning glyph tile with a heading reading "You have used 84% of your API quota" and a dismiss cross on the far right. Under it, a usage meter: a thin track with an amber fill at eighty-four percent, and beneath it a flex row with the used and total figures on the left in monospace and the reset date on the right in muted text. Then a two-line paragraph explaining what happens at the limit — requests start returning 429 rather than failing silently. Finish with a button row: a dark "Upgrade to Scale" primary, a bordered "Compare plans" secondary, and a muted text link for adjusting alert thresholds. Keep the whole thing comfortable inside a max-w-2xl container.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .