Billing Setup Fee Breakdown

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.

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

Usage

The file also exports billing123Demo, 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 { Billing123, billing123Demo } from "@/components/blocks/billing/billing123";

export default function Page() {
  return <Billing123 {...billing123Demo} />;
}

Props

Types

interface FeeLineItem {
  label: string;
  amount: string;
  description?: string;
}

Behavior notes

• All amounts, including both subtotals, the tax row, and the grand total, are passed in as pre-formatted strings rather than numbers, so the component never sums or formats currency itself.
• The tax row only renders when taxAmount is provided, so quotes without tax collapse cleanly.
• Line items support an optional description shown as a smaller line underneath the label, useful for explaining what a fee covers.
• Setup and recurring sections use identical layout and styling, reinforcing that they're two separate totals rather than one combined list.

Frequently asked questions