Billing Referral Dashboard Mini
A condensed referral performance card for partner or affiliate portals, showing clicks, signups, and conversion rate in a three-column strip, plus an earned-this-month total and the partner's referral link. Sized for a dashboard sidebar or widget rather than a full analytics page.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-referral-dashboard-mini.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing111.tsx instead.
Usage
The file also exports billing111Demo, 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 { Billing111, billing111Demo } from "@/components/blocks/billing/billing111"; export default function Page() { return <Billing111 {...billing111Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Referral performance" | Card heading. |
| description | string | none | Optional one-line note under the heading. |
| clicks | number | none | Total link clicks, formatted with a 'k' suffix above 1,000. |
| signups | number | none | Total signups attributed to the referral link. |
| conversionRate | string | none | Signups divided by clicks, already formatted as a percentage string. |
| earnedThisMonth | string | none | Commission earned this month, already formatted as currency. |
| referralLink | string | none | The partner's tracking link, shown in the footer. |
| shareHref | string | "#" | Destination for the Share link button. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- clicks and signups are numbers formatted by a small internal helper that shows a 'k' suffix above 1,000 (e.g. 2840 renders as 2.8k); conversionRate and earnedThisMonth are plain pre-formatted strings.
- The Share link control is a next/link, not a client-side clipboard copy, so it works without JavaScript and can point at a real share flow or referral page.
- This is a non-client component. It has no local state; every value comes in through props and re-renders whenever the caller's data changes.
- The referral link is shown as plain read-only text in the footer, not an editable input.
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.