Billing Referral Credit
A referral credit card showing the account's available credit balance, an 'Apply to next invoice' toggle, and a referral link with a copy button. Meant for a billing dashboard or referral program screen where a user tracks and applies rewards earned from inviting others.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-referral-credit.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing110.tsx instead.
Usage
The file also exports billing110Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing110, billing110Demo } from "@/components/blocks/billing/billing110"; export default function Page() { return <Billing110 {...billing110Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Referral credit" | Card heading. |
| description | string | none | Optional one-line note under the heading. |
| creditBalance | string | none | Available credit total, already formatted as currency. |
| pendingReferrals | number | none | Optional count of referrals not yet converted; the note is omitted when 0 or unset. |
| referralLink | string | none | The link shown in the read-only field and copied by the copy button. |
| defaultApplyToNextInvoice | boolean | true | Starting state of the apply-to-next-invoice toggle. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- "Apply to next invoice" is local toggle state (defaultApplyToNextInvoice sets the initial value); the component doesn't call your backend, so wire the toggle's resulting value into your own invoice logic.
- The copy button uses navigator.clipboard.writeText on the referralLink value and swaps to a checkmark for 2 seconds; if the clipboard permission is denied, it silently falls back to leaving the link selectable in the input.
- This is a client component because both the toggle and the copy button need browser-side state and the Clipboard API.
- pendingReferrals only renders its note when it's a positive number, so omit it or pass 0 to hide the line entirely.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.