Volume Tier Graph React component
Tiered pricing you can see: a stepped price curve with a draggable marker, graduated or volume modes, a live total and average per unit, and the cost split across each tier.
About the Volume Tier Graph component
Volume Tier Graph turns a confusing tier table into a picture: unit price steps down as volume goes up, and dragging the marker along the curve shows the monthly total, the average per unit and how the cost splits across each tier.
Switch between graduated pricing, where each tier is charged at its own rate, and volume pricing, where every unit gets the rate of the tier you reach.
When to use it
Use it for email and SMS pricing, API and cloud usage, wholesale discounts and any price that drops with quantity.
With a flat rate there's nothing to show; a simple calculator is enough.
Installation
Add the Volume Tier Graph component to your project with the shadcn CLI. It lands in components/volume-tier-graph.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/volume-tier-graphOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<VolumeTierGraph /> accepts 12 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "The more you send, the less you pay" |
| subtitle | string | "Drag the marker along the curve" |
| tiers | { upTo?: number; price: number }[] | DEFAULT_TIERS |
| min Range of the slider. | number | 100 |
| max | number | 1000000 |
| defaultUnits | number | 25000 |
| mode "graduated" charges each tier at its own rate; "volume" charges every unit at the tier reached. | "graduated" | "volume" | "graduated" |
| showModeSwitch Show the Graduated / Volume switch. | boolean | true |
| unit | string | "emails" |
| currency | string | "$" |
| height Height of the graph, in px. | number | 220 |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "The more you send, the less you pay"
- subtitlestringDefault: "Drag the marker along the curve"
- tiers{ upTo?: number; price: number }[]Default: DEFAULT_TIERS
- min
Range of the slider.
numberDefault: 100 - maxnumberDefault: 1000000
- defaultUnitsnumberDefault: 25000
- mode
"graduated" charges each tier at its own rate; "volume" charges every unit at the tier reached.
"graduated" | "volume"Default: "graduated" - showModeSwitch
Show the Graduated / Volume switch.
booleanDefault: true - unitstringDefault: "emails"
- currencystringDefault: "$"
- height
Height of the graph, in px.
numberDefault: 220
npm dependencies
Installed for you by the shadcn CLI.
Volume Tier Graph FAQ
- What's the difference between the modes?
- Graduated charges the first 1,000 at tier one, the next 9,000 at tier two and so on. Volume charges every unit at the rate of the tier the total lands in.
- How do I define tiers?
- tiers is { upTo, price }[] in order, with price per unit. Leave upTo off the last tier.
- Why is the axis logarithmic?
- Tiers usually grow by powers of ten, and a log scale gives each of them a useful width.
- Can it be used without a mouse?
- Yes, the marker is a slider: arrow keys move it about 12% at a time and Home and End jump to the limits. On touch, drag anywhere on the graph.
