shadcn.io is not affiliated with official shadcn/ui
Credit Balance Success Block for Vue
A narrow full-height confirmation for added credit: the new balance counting up from the old one with the change beside it, and a ledger of the credit by expiry that marks the batch used first.
Installation
Overview
Tell people what a top-up did to their balance, with this credit added page for Vue with Ark UI. It fills the screen between the page's two side rails and one band with a plus mark at each end, and keeps to one narrow centred column. A check in a muted tile, the amount in the heading and one sentence come first. Then the new balance is written large and counts up from the old figure with a Counting Number, with a pill beside it for the change and the balance it came from. A corner-marked frame lists the credit by expiry, soonest first, with the batch that is spent first marked with a Badge, each row showing its amount, its expiry date and the days left. The Shine Button that sends the person back to work is the only colored control. It's built from Counting Number, Badge, Shine Button and Guides, with a CSS entrance only. For AI tools, API credits, usage-priced apps and any wallet that tops up.
FAQ
What stays in the page, and how do I wire it for real?
Everything: the page describes a top-up that already happened for a fictional account, so nothing is bought and no balance is stored. Render it after your payment provider confirms the charge and your ledger has the new batch, and pass your own batches in CREDITS: an amount in cents, an expiry date, a name, and fresh: true on the one just added. The Start writing link is a placeholder href.
Where do the balance, the change and the day counts come from?
From the ledger, never typed twice. The new balance is the sum of every batch, the change is the sum of the fresh ones, the old balance is the rest, and the heading, the big figure and the pill all read those three numbers. Each row's "in 78 days" is the distance between two fixed ISO dates (AS_OF and its expiry), so it reads the same on every visit instead of following the visitor's clock.
Why does the ledger say which credit is used first?
Because it decides whether anything is lost. The ledger is sorted by expiry and the soonest row carries the Used first badge, which is only true if your spending code takes credit in that order, oldest expiry first. If yours works differently, change bySoonest and the badge so the page says what your product does.
How does the count-up behave, and what does reduced motion do?
The balance counts from the old figure to the new one through every number on the way, slowing into the last digits. Screen readers read the new balance once and never the count, and with reduced motion, or with no script, the new figure is shown at once. The change pill and the heading never move.
How are amounts and dates written?
Amounts are whole cents written with Intl.NumberFormat in a fixed en-US locale, each in one left-to-right span so digits and signs keep their order on a right-to-left page; the big figure is a left-to-right line of $ and the counting digits. Dates are Intl.DateTimeFormat in UTC, kept in time elements.