‹ components

PegBadge

stablev1.0.0·open in canvas

Stablecoin peg health from the SIGNED bps deviation -- tone by magnitude, sign kept visible.

Installnpx shadcn add @cids/peg-badge
Live demo
on peg+4bpsdrifting−38bpsdepegged−230bps

Motion · tap to replay

honors reduced-motion

None (peg state is data).

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 { PegBadge } from "@/design-system";

<PegBadge deviationBps={4} />     // on peg +4bps
<PegBadge deviationBps={-38} />   // drifting −38bps
<PegBadge deviationBps={-230} />  // depegged −230bps

Tokens · live

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

States · live

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

on peg

on peg+4bps

drifting

drifting−38bps

depegged

depegged−230bps

Stablecoin peg health from the SIGNED bps deviation -- tone by magnitude, sign kept visible.

Anatomy

( on peg +4bps )     buy tint,  |bps| < 25
( drifting −38bps )  warning,   25 <= |bps| < 200
( depegged −230bps ) sell tint, |bps| >= 200

Props

PropTypeDefaultNotes
deviationBpsnumber--SIGNED deviation (+ above / − below peg).
classNamestring--cn-merged.

Motion

None (peg state is data).

A11y

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.