Usage pricing
ProA tiered rate table with how much of each tier has been used.
pnpm dlx shadcn@latest add @caliper/usage-pricing| Monthly requests | Price per request | Your usage |
|---|---|---|
| First 100,000 (1–100,000) | Free | |
| Next 900,000 (100,001–1,000,000) | $0.0004 | |
| Next 9,000,000 (1,000,001–10,000,000) | $0.0002 | Your usage is in this tier |
| Next 10,000,000+ | $0.0001 |
1,340,000 requests so far this month cost $428.
When to use #
Use it for
- Explaining pay-as-you-go pricing and what a given usage costs.
- Customers want to see where tiers change.
Skip it when
- Pricing is a flat fee.
Installation #
pnpm dlx shadcn@latest add @caliper/usage-pricing
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source. It is built from UsagePricing, tieredCost and money.
import { UsagePricing, tieredCost, money } from "@/components/ui/usage-pricing"
The worked example comes with Pro
The 17-line example behind the preview opens here with a Pro or Team licence.
API reference #
UsagePricing
component
tieredCost
component
No props of its own; it accepts the native props of its root element.
money
component
No props of its own; it accepts the native props of its root element.
Accessibility #
It exposes status semantics, with aria-label and aria-hidden kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.