Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Credit Expiry Billing Block for React Aria

Three credit batches for a transcription service with days left from a fixed date, a 30, 60 or 90 day extension that re-dates every expiring batch and prices it at 2% of the credits' value per 30 days, and a primary that names the total.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people keep credits that would otherwise lapse, with this credit expiry section for React with React Aria. A hairline frame with a plus mark on each corner lists three batches as ruled rows: promotional credits with 13 days left, referral credits with 30, and a purchased pack that does not expire. Each row shows its credits, its expiry date and a line saying what extending would do. A Toggle Group picks the extension (30, 60 or 90 days); the line under every expiring batch changes to its new date and its fee, which is 2% of the credits' value for every 30 days. The Shine Button at the foot names the total, such as "Extend 2 batches by 60 days, $3.19", and pressing it moves the dates. It's built from Toggle Group, Badge, Shine Button and Guides, with a CSS entrance only. For credits, vouchers and any balance that has a use-by date.

FAQ

How do I fill it with my batches?

Edit START with a name, a source line, the credits, and an ISO expires date, or an empty string for a batch that never expires. VALUE is what one credit is worth in cents and FEE the percentage charged for each 30 days; AS_OF is the date the days left are counted from. The fee for a batch is its credits times the value times the percentage times the days over 30, rounded to the cent, and the total is the sum of those rows.

What stays local, and how do I make it real?

Everything. Extending moves the dates in this page's state and says "Extended 2 batches by 60 days in this demo, nothing was charged." In your app compute the fee on the server, charge it, and move the expiry dates from the response; never trust a date or a price sent from the page.

What if I extend twice?

The second extension starts from the new date, so two 30-day extensions end 60 days later than the original date and the fees are charged on each. The preview line always shows the date the next press would give.

Is it accessible?

The extension buttons are a named group with arrow-key support, the dates are written out ("Wed 28 Oct, 13 days left"), and the status line reports the result once. A batch that never expires says so in words rather than showing a blank, and no state depends on colour.

How does it look on a phone?

The rows keep their two lines, the extension buttons sit under their label, and the foot is pinned to the bottom of the screen with the primary button across it, its label naming the total.

All 167 billing blocks