sh4dcnv2 · atlas
← libraries

@twelfth

Components for category managers and retail buying teams: price position, sales vs forecast with P10–P90 bands, weeks of cover, pricing scoreboards and micro charts. Built by Twelfth.

9 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.twelfth.ai/r/registry.json
pnpm pnpm dlx shadcn@latest add https://ui.twelfth.ai/r/registry.json
bun bunx shadcn@latest add https://ui.twelfth.ai/r/registry.json
fetch registry curl -s https://ui.twelfth.ai/r/registry.json

Components

9 total
Retail format lib

Money, units, percent, price index and weeks of cover, formatted the way a category manager reads them (en-AU by default).

npx shadcn@latest add https://ui.twelfth.ai/r/retail-format.json
One open lib

Keeps one hover card open at a time, so sweeping across a row of badges never stacks two cards.

npx shadcn@latest add https://ui.twelfth.ai/r/one-open.json
Market side ui

The favourable / exposed / level tone every catman figure shares, the arrow that carries it without colour, and the two colour tokens behind it.

npx shadcn@latest add https://ui.twelfth.ai/r/market-side.json
Price position ui

Where our prices sit against a competitor (12% above, 4% below, in line), as a chip or as a badge with the index and matched-line evidence on hover.

npx shadcn@latest add https://ui.twelfth.ai/r/price-position.json
Price trend ui

Weekly price position against the market as a small line with a dashed parity line; hover or arrow through any week for its index and change.

npx shadcn@latest add https://ui.twelfth.ai/r/price-trend.json
Price scoreboard ui

The four numbers atop a pricing page: overall position vs market with its index and trend, then lines priced above, in line and below, each optionally a filter.

npx shadcn@latest add https://ui.twelfth.ai/r/price-scoreboard.json
Micro trend ui

A small inline chart of one or more lines over time for a table cell or tile: sales vs forecast with a dashed forecast, P10–P90 band and a this-week marker; ga…

npx shadcn@latest add https://ui.twelfth.ai/r/micro-trend.json
Micro stat ui

The figures under a chart: a change indicator ("vs LY ▲6.2%") toned by whether up is good or bad, and a labelled figure ("OTB $42k"), each explained in a toolt…

npx shadcn@latest add https://ui.twelfth.ai/r/micro-stat.json
Weeks of cover ui

Weeks of stock on hand at the current rate of sale, on a track against the healthy band: short (stockout risk), in band, or over (aged cash).

npx shadcn@latest add https://ui.twelfth.ai/r/weeks-of-cover.json