Billing Revenue Share Calculator

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/billing117.tsx instead.

Usage

The file also exports billing117Demo, 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 { Billing117, billing117Demo } from "@/components/blocks/billing/billing117";

export default function Page() {
  return <Billing117 {...billing117Demo} />;
}

Props

Types

interface RevenueTier {
  id: string;
  label: string;
  min: number;
  /** Upper bound of this tier, exclusive. Leave undefined for the top, open-ended tier. */
  max?: number;
  /** Commission rate for revenue in this tier, as a percent (e.g. 15 for 15%). */
  rate: number;
}

Behavior notes

• Payout is calculated marginally, like a tax bracket: each tier's rate only applies to the slice of revenue that falls between that tier's min and max, not the full revenue amount.
• The tier list highlights whichever tier the current revenue actually reaches into with a primary-colored border and bolder text.
• The effective rate shown under the total payout is payout divided by revenue, which will sit between the lowest and highest configured tier rates once revenue crosses more than one tier.
• Tiers are expected in ascending order by min; the calculation loops through them in the order given and doesn't sort them itself.
• The last tier can omit max to represent an open-ended top bracket, anything at or above that tier's min is included.

Frequently asked questions