# Price band

A price band as a picture: how far from the market a line can sit, across shelf prices on a log scale, before it reads as priced above or below market. Tiers step the band; dollar limits narrow it. Hover for the band at any price.

Docs: https://ui.twelfth.ai/price-band · Category: Pricing · Updated: 2026-11-02

## Install

```bash
npx shadcn@latest add https://ui.twelfth.ai/r/price-band.json
```

```tsx
import { PriceBandChart, PriceBandCounts, PriceBandMini } from "@/components/ui/price-band"
```

## Example

```tsx
<PriceBandChart
  band={{
    abovePct: 10,
    belowPct: 10,
    tiers: [{ fromPrice: 500, abovePct: 5, belowPct: 5 }],
  }}
  counts={{ below: 635, inLine: 251, above: 146 }}
  countsNote="Your lines now:"
/>
```

## Price tiers

Each tier starts at its shelf price: the band steps there, and the price is marked on the axis.

```tsx
<PriceBandChart
  band={{
    abovePct: 15,
    belowPct: 12,
    tiers: [
      { fromPrice: 100, abovePct: 10, belowPct: 8 },
      { fromPrice: 1000, abovePct: 5, belowPct: 4 },
    ],
  }}
/>
```

## Dollar limits

A side capped in dollars narrows as the price grows: 10% of a $2,000 line is more than $40.

```tsx
<PriceBandChart band={{ abovePct: 10, belowPct: 8, aboveAmount: 40, belowAmount: 25 }} />
```

## In a table row

The mini picture beside the band's own words, with where the lines sit today.

```tsx
<div className="flex items-center gap-2">
  <PriceBandMini band={band} />
  <div>
    <span className="font-mono">{band.words}</span>
    <PriceBandCounts counts={{ below: 96, inLine: 301, above: 58 }} className="mt-0.5 flex" />
  </div>
</div>
```

## PriceBandChart props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `band` (required) | `PriceBandShape` |  | { abovePct, belowPct, aboveAmount?, belowAmount?, tiers?: [{ fromPrice, … }] }: in line from belowPct under to abovePct over market; an amount caps that side in dollars; a tier takes over from its shelf price. |
| `counts` | `{ below, inLine, above } \| null` |  | Lines in each zone today, shown under the plot while nothing is hovered. |
| `countsNote` | `string` |  | Before the counts, e.g. "Your lines now:". |
| `labels` | `Partial<PriceBandLabels>` |  | The chart's own words: above, below, inLine, market, axis and the screen-reader description. |
| `className` | `string` |  | Extra classes on the figure. |

## PriceBandMini props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `band` (required) | `PriceBandShape` |  | As above. No axis or labels; hidden from screen readers, so put the band's words beside it. |
| `className` | `string` |  | Extra classes. |

## PriceBandCounts props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `counts` (required) | `{ below, inLine, above }` |  | Lines in each zone. |
| `note` | `string` |  | Before the counts. |
| `className` | `string` |  | Extra classes. |

## Notes

- Prints no wording for the band itself ("±10% under $500"): put the band's words beside it, from wherever your bands are defined, so they read one way everywhere.
- Shelf price runs on a log scale, so a $5 line and a $5,000 line both get room; the gap scale is symmetric around the market line.
- Reads the favourable and exposed colour tokens installed by market-side.

---

twelfth UI: Open-source (MIT) shadcn components for category managers and retail buying teams, by twelfth (https://twelfth.ai). React and TypeScript on shadcn's Base UI styles and Tailwind CSS v4. Components take plain props and fetch no data. Every block: https://ui.twelfth.ai/llms.txt