Catman · Pricing
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.
@twelfth/price-scoreboardui@twelfth/price-trend@twelfth/retail-format
9% below marketindex 91
Examples
As filters
Click a count to filter; click it again to clear. The selected tile is spotlit, not hovered.
9% below marketindex 91
Read-only
In line with marketindex 100
Priced above market12
In line with market88
Priced below market9
No position yet
—
Priced above market0
In line with market4
Priced below market1
Installation
1. Add the block. It brings what it builds on (
price-trend,retail-format) with it.terminalnpx shadcn@latest add https://ui.twelfth.ai/r/price-scoreboard.json2. Optional: register the namespace in
components.jsonto writenpx shadcn add @twelfth/price-scoreboardfrom then on.components.json{ "registries": { "@twelfth": "https://ui.twelfth.ai/r/{name}.json" } }
API reference
PriceScoreboard
| Prop | Type | Default | Description |
|---|---|---|---|
| positionPct* | number | null | — | The range's overall position vs market, in percent. |
| counts* | { above, in_line, below } | — | Lines in each verdict. |
| trend | PriceTrendPoint[] | [] | Weekly position for the sparkline beside the index. |
| unitShares | { above?, in_line?, below? } | — | Each verdict's share of recent units, in percent. |
| selected | PriceVerdict | null | null | The verdict filtering the list. |
| onSelect | (verdict) => void | — | Makes the counts filters. |
| info | ReactNode | — | Beside the position, e.g. an (i) explaining the bands. |
Notes
- Lays out on its own container width (@container), so it fits a narrow panel as well as a page.
