TxStatus

stablev1.0.0·open in canvas

The transaction lifecycle, always visible (heuristic #1) -- the component no reference library ships.

Installnpx shadcn add @cids/tx-status

Live demo

Ready

Motion · tap to replay

honors reduced-motion

Pulse on the in-flight dot only (status indicator, not data; collapses under reduced-motion). Terminal states are still.

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

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

<TxStatus state="pending" detail="5D3k...Wq signature" />
<TxStatus state="confirmed" />

Tokens · live

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

--warning
--info
--buy
--sell
--fg-subtle

States · live

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

idle

Ready

signing

Waiting for wallet…

pending

Pending confirmation…5xK…9fQ2

confirmed

✓ Confirmed5xK…9fQ2

failed

✕ FailedUser rejected

The transaction lifecycle, always visible (heuristic #1) -- the component no reference library ships.

Anatomy

o  Waiting for wallet...   signing: warning pulse
o  Pending confirmation... pending: info pulse
✓  Confirmed               buy   |  ✕ Failed  sell

Props

Prop	Type	Default	Notes
`state`	`"idle"`	"signing" \	"pending" \	"confirmed" \	"failed"`	--	The lifecycle.
`detail`	`string`	--	Mono line under the label (signature, error hint).
`className`	`string`	--	cn-merged.

Motion

Pulse on the in-flight dot only (status indicator, not data; collapses under reduced-motion). Terminal states are still.

· role="status" + aria-live="polite": transitions are announced without stealing focus -- the user acts in the wallet while the UI reports (heuristic #2).
· Terminal states carry ✓/✕ glyphs + words, never color alone.

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.