shadcn.io is not affiliated with official shadcn/ui
Text Message Credits Account Block for React Aria
The text-message credits left for verification codes as a number and a 20-segment meter, a ledger of the latest codes sent with a masked number and the balance after each, a Low state at 5 or fewer, and a nudge to an authenticator app.
Installation
Overview
Show how many verification texts an account has left, with this text message credits section for React with React Aria. A hairline frame with a plus mark on each corner opens with the balance as a large number and a meter of 20 segments (solid for the texts left, a lighter weight for the ones used), a line that says Low in words at 5 or fewer and one that says none are left at zero, and when the allowance resets. A ledger of the six latest codes follows, each with its date and time, its purpose (sign-in code, password reset or test code), the number masked to its last four digits, its cost of 1 and the balance after it; on a phone each is a card. A band at the foot nudges to an authenticator app, which costs no texts. The header's Shine Button sends a test code, which spends one credit in the page, adds a row and pushes the oldest out so the panel keeps its height. Nothing is for sale here. It's built from Shine Button, Badge, Button and Guides, with a CSS entrance only. For the security or two-step page of any app that texts codes.
FAQ
How do I use my own allowance and codes?
Set ALLOWANCE (the texts included each month), LOW (the count at which the line says Low) and RESETS_ON, and edit SENT, the codes already sent this month, oldest first, each with its balance after it. The number on the page, the meter's fill, the "Latest 6 of 7" count and the Low state are all worked out from them. CAP is how many rows the ledger shows.
Does Send a test code send a text?
No. It spends one credit in this page's state, adds a row to the ledger and says "Nothing was sent" in the status line. At zero it refuses and says when the allowance resets. To make it real, call your sending route, take the balance and the new row from its response, and show a failed send as a failure, not a spent credit.
How does Low show without colour?
The badge says Low or None left with an icon, the line under the meter says how many texts remain and what happens at zero, and the meter's used and unused segments differ in weight and are never the only signal: the number is written next to them. No part turns red or amber.