‹ components

GasFee

draftv0.9.0·open in canvas

Network-fee row — amount + optional congestion level, mono-safe.

Installnpx shadcn add @cids/gas-fee
Live demo
Network fee0.000005 SOL≈ $0.0009low
Priority fee0.0021 SOL≈ $0.39elevated
Network fee0.000005 SOL≈ $0.0009

Motion · tap to replay

honors reduced-motion

None. Fee updates swap text in place — if fees refresh live, debounce upstream; a flickering fee row reads as instability.

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

<GasFee amount="0.000005 SOL" usd="≈ $0.0009" level="low" />
<GasFee amount="0.0021 SOL" usd="≈ $0.39" level="elevated" label="Priority fee" />

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.

never color alone . Severitymaps to congestion pricingnot danger: success ink only at "low"error ink only at "high".

Network-fee row — amount + optional congestion level, mono-safe.

Anatomy

Network fee     0.000005 SOL ≈ $0.0009 LOW
└ label (muted)  └ amount     └ fiat    └ level word
                  (data ramp)   (subtle)  (tone ink, uppercase)

Props

PropTypeDefaultNotes
amountstring—Preformatted native units ("0.000005 SOL").
usdstring—Fiat approximation ("≈ $0.0009").
level"low" "normal" \"elevated" \"high"`—Congestion; omit for flat-fee chains.
labelstring"Network fee"E.g. "Priority fee", "Bridge fee".
classNamestring—cn-merged.

Motion

None. Fee updates swap text in place — if fees refresh live, debounce

upstream; a flickering fee row reads as instability.

A11y

Plain text row — label, amount, fiat, and level word are all readable

in order. The level word doubles as the non-color cue. Keep amount

preformatted with its unit so screen readers say "0.000005 SOL", not

a bare float.

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.