Billing Base 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/billing26.tsx instead.

Usage

The file also exports billing26Demo, 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 { Billing26, billing26Demo } from "@/components/blocks/billing/billing26";

export default function Page() {
  return <Billing26 {...billing26Demo} />;
}

Props

Types

interface FeeLineItem {
  label: string;
  /** Shown on the right, e.g. "Included", "$0.00", "5 seats". */
  value: string;
  description?: string;
}

Behavior notes

• The component is a plain server-rendered display, there's no toggle or state, lineItems and baseFee are rendered exactly as passed.
• value on each line item is a free-form string rather than a number, so you can show "Included", "$0.00", or a quantity like "5 seats" depending on what makes sense for that line.
• The total row at the bottom always echoes baseFee and billingPeriod rather than summing the line items, since most SaaS pricing intentionally shows individual items as value rather than itemized cost.
• Long line item descriptions wrap normally under the label instead of truncating, so keep them to a sentence if you want every row the same height.

Frequently asked questions