Billing Estimate Calculator

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.

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

Usage

The file also exports billing56Demo, 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 { Billing56, billing56Demo } from "@/components/blocks/billing/billing56";

export default function Page() {
  return <Billing56 {...billing56Demo} />;
}

Props

Types

interface EstimateResource {
  id: string;
  label: string;
  unit: string;
  min: number;
  max: number;
  step: number;
  defaultValue: number;
  pricePerUnit: number;
  includedUnits?: number;
}

Behavior notes

• Sliders are native input type=range elements, not a shadcn/ui primitive, since the base UI kit doesn't ship a slider component.
• Each resource's billable amount is Math.max(0, quantity - includedUnits), multiplied by pricePerUnit. Nothing is billed below the included allotment.
• The monthly total is basePrice plus every resource's cost; line items are recomputed with useMemo whenever a slider value changes.
• The yearly toggle multiplies the monthly total by (1 - yearlyDiscountPercent / 100) and shows that as the monthly-equivalent, with the full annual charge underneath.
• The bottom CTA button doesn't submit or link anywhere on its own; wrap it in a Link render or add an onClick for a real checkout flow.

Frequently asked questions