shadcn.io is not affiliated with official shadcn/ui
SMS Credit Recharge Billing Block for Ark UI
SMS credits priced by destination: a table of five countries with credits per message, last month's sends and credits used, the messages your balance covers at that mix, and three recharge amounts that each say how many more messages they add.
Installation
Overview
Show customers what a recharge buys when each message costs a different number of credits, with this SMS credit recharge panel for React with Ark UI. It's the credits screen of Nudgeroost, an SMS reminder service. A hairline frame with a plus mark on each corner holds a native table of five destinations (United States, Canada, United Kingdom, Germany and India) with credits per message, the messages sent last month and the credits those sends used, plus a totals row; on a phone the numbers fold into the first cell. Under it the balance, in Sliding Number digits, is turned into "Lasts 3,980 more messages at last month's mix", and three recharge chips (2,500, 5,000 and 10,000 credits, with their prices) each say how many more messages they add. The foot has the Shine Button, "Buy 5,000 credits", the only colored control. For messaging, notification and alerting services that price by country.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The destinations, last month's sends, the packs and the balance are typed at the top of the file, and Buy adds the chosen credits to the balance in the page with a status message that says no charge was made. To wire it, read the credits per destination and last month's sends from your messaging provider, the balance from your ledger, and make Buy create a payment through your provider's hosted fields. The block never takes a card number.
How is the reach worked out?
Last month's credits used divided into last month's messages sent gives the average cost of a message, 1.3 credits here. A number of credits covers that many credits divided by the average, rounded down. The balance line and every chip use the same formula, so changing a destination's credits or its sends changes all of them together. It is an estimate: a different mix of countries next month changes the answer.
Do the chips really choose?
Yes. Each chip is a native radio button in a fieldset, so arrow keys move between amounts and the chosen chip fills with the foreground color, not the accent. The line under the chips and the label of the Shine Button follow the choice, and buying keeps the choice so you can buy again.
Is the table accessible?
It is a native table with a caption, column headers with scope, a row header for each country and a totals row, and the same figures are in the first cell on a phone, so a screen reader hears them once per layout. Numbers are tabular and counts are kept whole in a right-to-left page.