MarginHealth

draftv0.9.0·open in canvas

Margin-ratio meter for trading accounts, with tiered risk labels and semantic buy/warning/sell/error tones.

Installnpx shadcn add @cids/margin-health

Live demo

Margin ratioHealthy37.00%

37%

Motion · tap to replay

honors reduced-motion

Bar width transitions over 300ms. The label and value change immediately so risk is never hidden behind animation.

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

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

<MarginHealth value={37.42} />

Tokens · live

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

--surface-container
--surface-bright
--outline-variant
--fg-subtle
--buy
--warning
--sell
--error
--radius-card
--motion-fast

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

healthycautionhighcriticalzeroclamped overflow.

Margin-ratio meter for trading accounts, with tiered risk labels and semantic buy/warning/sell/error tones.

Anatomy

Margin ratio  [==========..............]  Healthy  37.42%

Props

Prop	Type	Default	Notes
`value`	`number`	--	Percent, clamped to 0-100.
`label`	`string`	`Margin ratio`	Visible label and meter name.
`precision`	`number`	`2`	Percent decimals.
`className`	`string`	--	cn-merged.

Thresholds are fixed: <50 healthy, 50-79.99 caution, 80-89.99 high, >=90 critical.

Motion

Bar width transitions over 300ms. The label and value change immediately so risk is never hidden behind animation.

· Uses role="meter" with aria-valuemin, aria-valuemax, aria-valuenow, and tiered aria-valuetext.
· Risk is not color-only: tier text and exact percent are visible.
· The meter is read-only and has no keyboard interaction.

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.