---
name: "@twelfth"
slug: "twelfth"
description: "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."
category: "Charts/data viz"
tags: ["charts", "forms"]
framework: "react"
license: "MIT"
author: "twelfth-ai"
website: "https://ui.twelfth.ai"
github: "https://github.com/twelfth-ai/catman-ui"
registry: "https://ui.twelfth.ai/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 9
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.

## Links

- Website: https://ui.twelfth.ai
- GitHub: https://github.com/twelfth-ai/catman-ui
- Registry JSON: https://ui.twelfth.ai/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/twelfth
- This file: https://sh4dcn.netlify.app/md/twelfth.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/twelfth-ai/catman-ui.git
# fetch the raw registry index
curl -s https://ui.twelfth.ai/r/registry.json
```

## Components (9)

| name | type | description | install |
| --- | --- | --- | --- |
| retail-format | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @twelfth to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/twelfth.md) for the component list.
2. Fetch the machine-readable index: https://ui.twelfth.ai/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: twelfth).
```