shadcn.io is not affiliated with official shadcn/ui
Low Credit Warning Billing Block for React Aria
A low-credit alert for a homework-tutor app with the runway worked out from the balance and a week of spend, and a list of five services in the order they pause at zero, which you can reorder, lock one of, and top up to move the run-out date.
Installation
Overview
Tell people what will happen before credits run out, with this low credit warning for React with React Aria. A hairline frame with a plus mark on each corner opens with the alert: "8.42 credits left, about 2 days at this week's pace", the run-out date and the daily average it comes from, with the one status icon on the page. Under it five services are listed in the order they will pause when credits reach zero, each with Move up and Move down buttons that keep focus on the button you pressed, and a Switch that makes Teacher API access immune. A line names the service that pauses first. The Shine Button at the foot adds 50 credits for $5; the run-out date moves by about 12 days and the alert softens. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For prepaid products, usage-based apps and any account where running out should not be a surprise.
FAQ
How is the runway worked out?
The balance divided by the average of the seven daily spends in BURN. The text rounds it to whole days ("about 2 days") and the date adds the rounded-up days to a fixed AS_OF, so it reads the same on the server and in every visitor's time zone. The alert icon only takes the warning colour while the runway is under three days.
How does the order work?
The list is the order services pause in once the balance hits zero. Move up and Move down swap neighbours, stay focusable at the ends and answer in the status line ("Weekly practice sets is already first."), and focus stays on the button you pressed even though the row has moved. Locking Teacher API access takes it out of the order: its buttons are unavailable and "Pauses first" skips it.
What stays local, and how do I make it real?
All of it. Adding credits raises the balance in this page's state and says "Added 50 credits in this demo. Nothing was charged." In your app charge the pack from your server, return the new balance, and store the pause order and the lock with the account so your job runner reads the same list when credits reach zero.