9 blocks · free to install · shadcn registry
Components for category managers.
The figures a buyer reads every day, in the words they read them in: price position, sales against forecast, cover, the favourable and exposed tones. Built by Twelfth, taken from the product retail teams use, and free to install into any React app.
Add any block
npx shadcn@latest add https://ui.twelfth.ai/r/price-position.json
npx shadcn@latest add https://ui.twelfth.ai/r/micro-trend.jsonEach block brings the pieces it builds on. Every page has a playground, the code for each variant, Open in v0, Lovable, Claude and more, and a copyable AI prompt.
Or register the namespace
{
"registries": {
"@twelfth": "https://ui.twelfth.ai/r/{name}.json"
}
}Then npx shadcn add @twelfth/price-position.
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.
Price scoreboard→
The four numbers at the top of a pricing page: the range's position against the market with its index and trend, then how many lines are priced above, in line and below. The counts can filter the list underneath.
Price trend→
Weekly price position against the market as a small line with a dashed parity line. Hover, or focus and use the arrow keys, to read any week's position, index and change.
Charts
Micro trend→
One or more lines over time, small enough for a table cell. Forecasts read as forecasts: dashed, with a P10–P90 band and a marker where actuals stop. Hover to glide the crosshair and read every series.
Micro stat→
The figures under or beside a chart. ChangeIndicator is a movement with its verdict, toned by whether up is good or bad. MicroStat is a labelled figure. Both explain themselves in a tooltip.
Stock
Foundations
Market side→
The tone every catman figure shares: favourable, exposed, level, unknown. Named after the reader's question (is this going my way) rather than the arithmetic, plus the arrow that carries it without colour and the two colour tokens behind it.
- formatMoney
- $1,240.00
- formatUnits
- 12,400
- formatPercent
- 12%
- formatIndex
- 112.4
- formatMarketPosition
- 12% above market
- formatWeeks
- 12 wks
Retail format→
Money, units, percent, price index, position words and weeks, formatted the way a category manager reads them. en-AU and AUD by default.
One open→
Keeps one hover card open at a time. Sweep across a row of badges and the card follows the pointer instead of stacking. Used by price-position and price-trend; use it for your own hover cards.
