‹ components

Amount

draftv0.9.0·open in canvas

Read-only formatted token amount — AmountInput's display sibling, financial type ramp.

Installnpx shadcn add @cids/amount
Live demo
1,234.57SOL0.00002314BONK−12.50USDC

Motion · tap to replay

honors reduced-motion

None. For values that change live, wrap in RollingNumber — Amount itself never animates.

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

<Amount value={1234.5678} symbol="SOL" />        {/* 1,234.57 SOL */}
<Amount value={0.00002314} symbol="BONK" />       {/* 0.00002314 BONK */}
<Amount value={-12.5} symbol="USDC" size="lg" />  {/* −12.50 USDC */}
<Amount value={184.26} decimals={4} />            {/* 184.2600 */}

Tokens · live

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

States · from doc

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

magnitude is always formatted from `Math.abs`.

Read-only formatted token amount — AmountInput's display sibling, financial type ramp.

Anatomy

−1,234.57 SOL
│└───┬───┘ └─ symbol (fg-muted)
│    └ magnitude — Math.abs, formatted
└ direction — from the signed value
  (guideline #5: two concerns, two computations)

Props

PropTypeDefaultNotes
valuenumber—Signed; full precision kept in title.
symbolstring—Rendered after the number, muted.
size"sm" "md" \"lg"`"md"The data-* financial type ramp.
decimalsnumber—Fixed fraction digits; overrides the magnitude default.
classNamestring—cn-merged.

Default formatting: ≥ 1 → 2 decimals + thousands separators;

< 1 → 4 significant digits. Locale pinned to en-US (deterministic

server/client render).

Motion

None. For values that change live, wrap in RollingNumber — Amount

itself never animates.

A11y

Plain text — screen readers read the formatted number and symbol

naturally. The title attribute carries the unrounded value for

precision on hover. Never encode meaning in color here; sign is the

− character.

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.