Catman · Pricing

Price position

Where our prices sit against one competitor: 12% above, 4% below, in line. As a chip for a table cell, or a badge that opens the index and the matched-line evidence on hover or focus.

@twelfth/price-positionui@twelfth/market-side@twelfth/one-open@twelfth/retail-formatpopoverlucide-react

Examples

Badge in a row

Sweep across them: one card open at a time, never stacked.

Chip

No card: for a dense table column or an inline mention.

12% above4% belowIn line—

Installation

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

API reference

PricePositionBadge

Prop	Type	Default	Description
competitor*	string	—	Who the comparison is against; named in the card and the label.
positionPct*	number \| null	—	Median gap across comparable lines, ours vs theirs, in percent. null when too few lines matched.
evidence*	{ matched, above, below }	—	How many lines the position rests on and which way they split.
period	string	—	e.g. "8-week comparison".
channel	string	—	e.g. "Direct retail" or "Marketplace sellers".
action	ReactNode	—	A link or button under the evidence.
className	string	—	Extra classes on the chip.

PricePositionChip

Prop	Type	Default	Description
positionPct*	number \| null	—	As above.
className	string	—	Extra classes.

Notes

Opening one card closes any other (one-open), so a row of badges never stacks cards.
The arrow carries the direction for readers who cannot separate the two tones.
Reads the favourable and exposed colour tokens installed by market-side.