Credits Wallet
Prov1.0.0A prepaid balance with burn rate, run-out date, top-ups, auto-recharge and an exportable log.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { CreditsWallet, type CreditsActivity, type CreditsRange } from "@/components/ui/notchset/blocks/credits-wallet";
export function Credits({ wallet }: { wallet: { balance: number; burn: number; today: string; ranges: CreditsRange[]; activity: CreditsActivity[] } }) {
return (
<CreditsWallet
account="Acme Labs"
balance={wallet.balance}
burnPerDay={wallet.burn}
today={wallet.today}
ranges={wallet.ranges}
amounts={[500, 1000, 2500]}
paymentMethod="VISA •• 4242"
onTopUp={(amount) => fetch("/api/credits/top-up", { method: "POST", body: JSON.stringify({ amount }) }).then((r) => {
if (!r.ok) throw new Error("charge failed");
})}
activity={wallet.activity}
/>
);
}Props
balance / burnPerDay / today–number / number / YYYY-MM-DDThe run-out date counts from today at the burn rate; under warnDays (45) it turns signal.
ranges–{ label, points, from, to, projectDays }[]Chart ranges; points are past balances ending today.
amounts / paymentMethod / onTopUp–number[] / string / (amount) => PromiseResolve once the money is in: the balance rolls up and a row slides in.
autoRecharge / onAutoRechargeChange–{ enabled, threshold, amount, thresholds } / (config) => voidAdds AUTO-RECHARGE with a switch and thresholds.
spendByAgent–{ name, amount }[]Adds BY AGENT with bars that grow in.
activity / csvName–{ id, title, detail, date, amount }[] / stringNegative amounts are spend; EXPORT CSV downloads date, item, detail and amount.
Anatomy
- Top-ups add to the balance and the activity locally until your data refreshes.
- The projection is a straight line at the burn rate from today.
- Hiding the balance blurs every amount, including the activity and the agent bars.
CreditsWalletdata-slot="credits-wallet"Balance, chart, panels and activity.
Source
components/ui/notchset/blocks/credits-wallet.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/credits-walletNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Usage-based products sold as prepaid credits
- Showing customers when their balance runs out and letting them top up
Use something else when
- Subscription plans without a balance: use Plan Compare or Seat Pricing
- Invoices for usage already billed: use Invoice Studio
Mistakes to avoid
- Resolve onTopUp only after the charge succeeds, so the balance never shows money you don't have
- Pass today from the server, so the run-out date matches billing
Agents find it by
- credits, prepaid balance, wallet, top up, add credits, auto recharge, burn rate, runway, usage billing, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/credits-wallet.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ← →
- Change the range
- Enter / Space
- Open a panel, pick an amount, add credits, export
- Tab
- Through the panel's controls
Accessibility
- The eye is a toggle button (aria-pressed); a hidden balance is announced as hidden, not read out
- Tiles report aria-expanded for the shared panel; amounts and thresholds are radio groups; auto-recharge is a switch
- The chart has a text label with the projection; the activity header is a button with aria-expanded and keeps its count
Motion
- Balance
- Rolls on top-up; blurs in 260ms when hidden and the eye's slash draws
- Chart
- Paths move between ranges (620ms glide); the TODAY node follows
- Panels
- Unroll in 380ms and fold in 240ms; agent bars grow in 60ms apart
- Top-up
- The scanner, then the new row rises into the activity
Responsive
- The balance scales with the container; tiles wrap two to a row on narrow screens.
Performance
- One SVG chart and plain rows; the CSV is built only when exported.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
