Catman · Foundations

Market side

The tone every catman figure shares: favourable, exposed, level, unknown. Named after the reader's question (is this going my way) rather than the arithmetic, plus the arrow that carries it without colour and the two colour tokens behind it.

@twelfth/market-sideuilucide-react

exposed

Examples

All four tones

favourableexposedlevelunknown

Installation

1. Add the block. It brings what it builds on with it.
terminal
```
npx shadcn@latest add https://ui.twelfth.ai/r/market-side.json
```
2. Optional: register the namespace in components.json to write npx shadcn add @twelfth/market-side from then on.
components.json
```
{
  "registries": {
    "@twelfth": "https://ui.twelfth.ai/r/{name}.json"
  }
}
```

API reference

MarketArrow

Prop	Type	Default	Description
side*	MarketSide	—	Which tone.
pointing	"theirs" \| "ours"	"theirs"	A gap points their way; an index points ours.

marketSideFromPosition

Prop	Type	Default	Description
positionPct*	number \| null	—	Above market is exposed, below favourable, within half a percent level.

Notes

Installs --favourable, --favourable-foreground, --exposed, --exposed-foreground with light and dark values.