Catman · Pricing

Price trend

Weekly price position against the market as a small line with a dashed parity line. Hover, or focus and use the arrow keys, to read any week's position, index and change.

@twelfth/price-trendui@twelfth/one-open@twelfth/retail-formatpopover

Examples

Drifting above

Crossing parity

Gaps in the data

Installation

1. Add the block. It brings what it builds on (one-open, retail-format, popover) with it.
terminal
```
npx shadcn@latest add https://ui.twelfth.ai/r/price-trend.json
```
2. Optional: register the namespace in components.json to write npx shadcn add @twelfth/price-trend from then on.
components.json
```
{
  "registries": {
    "@twelfth": "https://ui.twelfth.ai/r/{name}.json"
  }
}
```

API reference

PriceTrend

Prop	Type	Default	Description
points*	{ week: string; positionPct: number \| null }[]	—	Weekly position, oldest first. A null week breaks the line.
label*	string	—	What the line is, for the card and screen readers.
against	string	"the market"	Who the comparison is against, in the explainer.
width	number	96	Pixels.
height	number	28	Pixels.
inverse	boolean	false	On a dark tile: the line takes the tile's text colour.

Notes

The y axis is symmetric around zero, so parity is always the middle and above is always up.
Opens instantly and shares one-open with the price badges.