KQ-648 · QR/FOLD

QR Fold

A receive card whose payment code lives folded into a strip until you ask for it. Pressing unfolds it: the wrapper's height glides from the strip to the square's ResizeObserver-measured height while the code scales up from its top edge, so it reads as paper opening downwards rather than a box growing, and folding away runs back on the exit ease because exits never spring. The toggle carries aria-expanded, Escape anywhere in the card folds the code and returns focus to it, and the address chip beneath copies with a tick drawn on flick.

KQ-648 · QR/FOLD

ReceiveBasin

Requesting$180.00

Code hidden · Address bsn1q7f4…a2js4c

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/qr-fold

Props

address: string; default —; The receiving address. Seeds the procedural code and fills the copy chip.
label: React.ReactNode; default "Receive"; Card heading; names the card for assistive technology.
network: string; default —; Chain or rail the address belongs to; shown as a mono chip and named in the code's label.
amount: number; default —; Requested amount in major units. Omit it for an open request.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints the requested amount. The default pins an explicit locale so server and client agree.
open / defaultOpen: boolean; default false; Controlled or initial fold state.
onOpenChange: (open: boolean) => void; default —; Fires from the press or the Escape that changed the fold.
modules: number; default 25; Grid size of the procedural code; clamped to 21–33 and forced odd.
onCopy: (address: string, ok: boolean) => void; default —; Fires from the copy attempt with whether the clipboard took it.

Prop	Type	Default	Description
address	string	—	The receiving address. Seeds the procedural code and fills the copy chip.
label	React.ReactNode	"Receive"	Card heading; names the card for assistive technology.
network	string	—	Chain or rail the address belongs to; shown as a mono chip and named in the code's label.
amount	number	—	Requested amount in major units. Omit it for an open request.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints the requested amount. The default pins an explicit locale so server and client agree.
open / defaultOpen	boolean	false	Controlled or initial fold state.
onOpenChange	(open: boolean) => void	—	Fires from the press or the Escape that changed the fold.
modules	number	25	Grid size of the procedural code; clamped to 21–33 and forced odd.
onCopy	(address: string, ok: boolean) => void	—	Fires from the copy attempt with whether the clipboard took it.