# Metered pricing — Detent

> Usage-based pricing that opens with one big sentence: type or drag your volume and every price runs with your hand, on real wheels, with a notch wherever the best plan changes. Three plan cards sit under it, priced at that volume, with the recommended one printed in grain ink.

Canonical: https://detentui.com/blocks/pricing
Last updated: 2026-11-10

## About

Usage-based pricing that opens with one big sentence: type or drag your volume and every price runs with your hand, on real wheels, with a notch wherever the best plan changes. Three plan cards sit under it, priced at that volume, with the recommended one printed in grain ink.

## Details

- The sentence is the control. Type the number, drag it, or use the slider under it, on a log scale so 300 and 30,000 are both easy to reach. The price settles with some weight instead of snapping.
- It recommends the plan that costs least. The plan in the sentence opens a menu of every plan at that volume, and if a person picks a dearer one it says what the cheaper one would save.
- Three plan cards show the real price at your volume and the sum behind it. The recommended card is printed in grain ink, the only colour on the page besides the price.
- Works for any usage: set `unit`, `period` and `range` for seats, credits or API calls.
- A plan past its limit goes quiet but stays available and says where it pauses, so nobody hits a dead end.
- The full comparison and common questions wait behind two rows.
- It follows the page’s theme, black in dark and white in light. Set `tone="black"` to keep it black on any page.
- On a narrow screen a bar keeps the plan and price in reach once the sentence scrolls away. Plans sit side by side from 896px.

## Keyboard shortcuts

| Keys | Action |
| --- | --- |
| ← → | Nudge the volume on the slider |
| ⇧ ← → | Bigger steps |
| Home / End | Lowest, highest |
| ↵ | Set a typed number |
| Esc | Drop a typed number |

## Install (Pro required)

```bash
npx shadcn add @detent-pro/pricing
```

## Related
- [All blocks](https://detentui.com/blocks)
- [Pro](https://detentui.com/pro)