@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.
Install this registry
npx shadcn@latest add https://ui.twelfth.ai/r/registry.json pnpm dlx shadcn@latest add https://ui.twelfth.ai/r/registry.json bunx shadcn@latest add https://ui.twelfth.ai/r/registry.json curl -s https://ui.twelfth.ai/r/registry.json Components
9 totalMoney, 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 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 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 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 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 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 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 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 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