PriceChange

stablev1.0.0·open in canvas

The sign-discipline primitive: direction from the signed value, magnitude always Math.abs -- a green loss is impossible.

Installnpx shadcn add @cids/price-change

Live demo

+9.40%−4.20%+0.04 bps

Motion · tap to replay

honors reduced-motion

None of its own (flash-on-change belongs to the row/cell, not the number).

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { PriceChange } from "@/design-system";

<PriceChange value={-4.2} />        // ▼ −4.20%  (sell tone)
<PriceChange value={9.4} suffix="%" /> // ▲ +9.40%  (buy tone)

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--buy
--sell

States · live

Forced instances — hover/focus still work on the live demo above.

up - down. That is the whole state spaceon purpose.

up

+4.20%

down

−4.20%

flat

+0.00%

The sign-discipline primitive: direction from the signed value, magnitude always Math.abs -- a green loss is impossible.

Anatomy

▲ +4.20%   value >= 0: buy tone
▼ −4.20%   value <  0: sell tone, magnitude via Math.abs

Props

Prop	Type	Default	Notes
`value`	`number`	--	SIGNED change. The component derives everything else.
`suffix`	`string`	`"%"`	Unit after the magnitude.
`precision`	`number`	`2`	toFixed digits.
`className`	`string`	--	cn-merged.

Motion

None of its own (flash-on-change belongs to the row/cell, not the number).

· Direction is conveyed by BOTH the glyph and the +/− sign, never color alone.
· Glyph is aria-hidden; the signed text reads naturally.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.