Billing Upcoming Invoice Preview

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing12.tsx instead.

Usage

The file also exports billing12Demo, 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 { Billing12, billing12Demo } from "@/components/blocks/billing/billing12";

export default function Page() {
  return <Billing12 {...billing12Demo} />;
}

Props

Types

interface InvoiceLineItem {
  description: string;
  quantity?: number;
  amount: string;
}

Behavior notes

• All money values (amount, subtotal, tax, total) are plain formatted strings, not numbers, so currency symbol, locale formatting, and negative-value display are entirely up to the caller.
• Credits and prorations are just line items with a string amount that starts with a minus sign, for example "-$8.20"; there's no separate credit prop or styling branch for them.
• The tax row only renders when the tax prop is set, so the card also works for regions or plans where tax isn't estimated up front.
• The line item list uses aria-label="Invoice line items" on the ul so screen readers announce it as a distinct group before reading each row's description and amount.
• The due date string is rendered twice, once in the header badge and once in the total row label, so it stays visible even if someone scrolls past the header on a long line-item list.

Frequently asked questions