shadcn.io is not affiliated with official shadcn/ui
Referral Credit Billing Block for React
Referral credit spread over the next three invoices: $60.00 earned from four friends, a cap of half of each invoice, a hatched bar for the credit each invoice consumes, the credit left for later and a switch that applies it automatically.
Installation
Overview
Show customers where their referral credit goes, with this referral credit section for React with Base UI. A hairline frame with a plus mark on each corner opens on three cells on shared hairlines: what was earned ($60.00 from four friends), what the next three invoices use and what is left for the invoices after. Under them each invoice is a bar, with the credit it consumes hatched and what you pay solid, because the rule is that credit pays at most half of an invoice ($14.50 of $29.00), so the credit stretches over more invoices than it would otherwise. A Switch, "Apply automatically", redraws the bars: off, every invoice is full price and the credit waits. The foot counts unsaved changes and holds the one Shine Button, "Save credit settings", beside Discard; Guides rule every band. For subscription apps, budgeting tools and any product that pays referrals in credit.
FAQ
How do I use my own invoices and credit?
Edit EARNED, FRIENDS, PRICE, SHARE and the INVOICES list at the top of the file. Each invoice has an id, an ISO date and an amount in dollars. The credit used on each invoice, the total used and the credit left are worked out from those by slicesOf, so they can never disagree with each other. Dates are read as UTC and formatted the same way on the server and in every time zone.
How is the half-invoice cap applied?
Credit is spent from the first invoice onward. Each invoice takes the smaller of what is left and its cap (PRICE * SHARE, $14.50 here). With $60.00 that is $14.50 three times, $43.50 in all, which leaves $16.50 for the invoices after the three drawn. Change SHARE to 1 and the first two invoices are paid in full.
What does the switch do?
It redraws the three bars from the same data. On, the hatched part is the credit each invoice consumes. Off, nothing is consumed: every bar is solid, the figures show $0.00 used and $60.00 left, and the credit waits. The switch is a real control with a name, and it uses the foreground tone, so the Shine Button stays the only colored control.
What stays local, and how do I save for real?
Saving only updates the page: the status line says "Saved in this demo. No invoice changed." and Discard goes back to the last saved state. Both buttons stay in place and answer ("No changes to save.") when nothing changed. To save for real, send auto to your server in the Save handler, apply the credit when the invoice is finalized, and show the invoices your billing system actually holds.
How is it accessible?
Each bar is drawn for the eye and hidden from screen readers; the same facts are written beside it ("$14.50 credit, you pay $14.50"). The switch is named by its visible label, the status line is one polite live region, and nothing relies on color: the hatch is a pattern, and the bars use foreground weights only. Reduced motion turns the width transition off.