Pricing

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.

@twelfth/price-bandui@twelfth/market-side@twelfth/retail-format

Your lines now:635 below251 in line146 above

Examples

Price tiers

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

Dollar limits

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

In a table row

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

±10%412 below980 in line211 above

±10% under $500, ±5% from $50096 below301 in line58 above

+10% (at most $40), −8% (at most $25)33 below140 in line12 above

Installation

1. Add the block. It brings what it builds on (market-side, retail-format) with it.
terminal
```
npx shadcn@latest add https://ui.twelfth.ai/r/price-band.json
```
2. Optional: register the namespace in components.json to write npx shadcn add @twelfth/price-band from then on.
components.json
```
{
  "registries": {
    "@twelfth": "https://ui.twelfth.ai/r/{name}.json"
  }
}
```

API reference

PriceBandChart

Prop	Type	Default	Description
band*	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

Prop	Type	Default	Description
band*	PriceBandShape	—	As above. No axis or labels; hidden from screen readers, so put the band's words beside it.
className	string	—	Extra classes.

PriceBandCounts

Prop	Type	Default	Description
counts*	{ 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.