Billing Overdue Account Warning
A high-visibility warning for a past-due account, with a days-overdue badge next to the heading, a large amount-due figure in its own panel, and a primary "Settle balance" button next to an optional invoice link. Built for dashboards and billing settings pages where a lapsed payment needs to be resolved before service is interrupted.
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-overdue-account-warning.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing83.tsx instead.
Usage
The file also exports billing83Demo, 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 { Billing83, billing83Demo } from "@/components/blocks/billing/billing83"; export default function Page() { return <Billing83 {...billing83Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Your account is past due" | Alert heading. |
| message | string | none | Optional explanatory line under the heading. |
| amountDue | string | none | Formatted outstanding balance shown in its own panel. |
| daysPastDue | number | none | Drives the "N days overdue" badge next to the heading. |
| invoiceId | string | none | Optional invoice reference shown next to the amount. |
| settleLabel | string | "Settle balance" | Label for the primary button. |
| settleHref | string | none | Destination for the primary settle-balance button. |
| invoiceLabel | string | "View invoice" | Label for the secondary button. |
| invoiceHref | string | none | When set, shows a secondary "View invoice" button; omitted entirely otherwise. |
| className | string | none | Extra classes for the outer alert element. |
Behavior notes
- The outer container has role="alert" directly on it so assistive tech announces the warning as soon as it mounts, without depending on the Alert primitive.
- daysPastDue only feeds the badge text (with correct singular/plural wording); the component doesn't compute it from a due date itself, so you subtract the invoice's due date from today on your side.
- The invoice-view button only renders when invoiceHref is set, letting the block work as a settle-only warning when there's nowhere else to link.
- Both buttons render as next/link elements via the Button component's render prop, and the primary button uses the destructive variant to match the alert's urgency.
- There's no dismiss control and no loading state on the settle button; it's a plain link, so a real "pay now" flow that shows a spinner mid-charge needs to be built where settleHref leads, not inside this component.
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.