# twelfth UI

> Open-source (MIT) shadcn components for category managers and retail buying teams: price position, pricing scoreboards, sales against forecast with P10–P90 bands, weeks of cover, and micro charts for table cells. Built by twelfth (https://twelfth.ai).

Install any block with the shadcn CLI; each one brings the pieces it builds on:

`npx shadcn@latest add https://ui.twelfth.ai/r/<name>.json`

Or register `"@twelfth": "https://ui.twelfth.ai/r/{name}.json"` under `registries` in components.json and use `npx shadcn@latest add @twelfth/<name>`.

## Facts

- Licence: MIT. Source mirror: https://github.com/twelfth-ai/catman-ui, synced hourly from the live registry.
- Stack: React and TypeScript, shadcn's Base UI styles, Tailwind CSS v4.
- Data: components take plain props and fetch nothing; wire them to your own API, warehouse or sheet.
- Colour: favourable and exposed are theme tokens (`--color-favourable`, `--color-exposed`) named for the reader, not for up or down.
- Publisher: twelfth (https://twelfth.ai), Melbourne, Australia.
- Markdown: every page has a Markdown twin at the same path plus `.md` (`https://ui.twelfth.ai/price-position.md`), and pages answer `Accept: text/markdown` with it.
- MCP: the shadcn MCP server browses and installs from this registry once the namespace is in components.json: `npx shadcn@latest mcp init --client claude` (or cursor, vscode, codex).

## Blocks

- [Retail format](https://ui.twelfth.ai/retail-format.md): Money, units, percent, price index and weeks of cover, formatted the way a category manager reads them (en-AU by default). Registry item: https://ui.twelfth.ai/r/retail-format.json
- [One open](https://ui.twelfth.ai/one-open.md): Keeps one hover card open at a time, so sweeping across a row of badges never stacks two cards. Registry item: https://ui.twelfth.ai/r/one-open.json
- [Market side](https://ui.twelfth.ai/market-side.md): The favourable / exposed / level tone every catman figure shares, the arrow that carries it without colour, and the two colour tokens behind it. Registry item: https://ui.twelfth.ai/r/market-side.json
- [Price position](https://ui.twelfth.ai/price-position.md): 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. Registry item: https://ui.twelfth.ai/r/price-position.json
- [Price trend](https://ui.twelfth.ai/price-trend.md): 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. Registry item: https://ui.twelfth.ai/r/price-trend.json
- [Tax basis](https://ui.twelfth.ai/tax-basis.md): Whether a price includes tax, as a badge the price sits inside: filled when the tax is in the figure, hollow when it is left out. Hover explains the tax (GST, VAT, GST/HST, sales tax), its rate and the price on the other basis. Show, hide, or print both bases. Registry item: https://ui.twelfth.ai/r/tax-basis.json
- [Price scoreboard](https://ui.twelfth.ai/price-scoreboard.md): 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. Registry item: https://ui.twelfth.ai/r/price-scoreboard.json
- [Price band](https://ui.twelfth.ai/price-band.md): A price band as a picture: how far from the market a line can sit across shelf prices (log scale) before it reads as priced above or below market, with tiers as steps, dollar limits as narrowing, a hover readout and optional line counts; plus a table-row mini. Registry item: https://ui.twelfth.ai/r/price-band.json
- [Micro trend](https://ui.twelfth.ai/micro-trend.md): 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; gaps left blank; a gliding crosshair with a tooltip reading every series. Registry item: https://ui.twelfth.ai/r/micro-trend.json
- [Micro stat](https://ui.twelfth.ai/micro-stat.md): 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 tooltip. Registry item: https://ui.twelfth.ai/r/micro-stat.json
- [Weeks of cover](https://ui.twelfth.ai/weeks-of-cover.md): 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). Registry item: https://ui.twelfth.ai/r/weeks-of-cover.json

## Optional

- [Full docs](https://ui.twelfth.ai/llms-full.txt): every block's examples, props and notes in one file
- [Registry index](https://ui.twelfth.ai/r/registry.json): every item, as the shadcn CLI reads it
- [twelfth](https://twelfth.ai): the retail workspace these components come from