Amount Pad

A send money keypad. The amount grows as you type and the send button carries it.

FreeWeb and MobileMotion

npx shadcn add @fetaui/amount-pad

Playground

Send toNoa LindqvistUSD

Balance $4,210.00

Failed

Send toInes ValeUSD

Balance $4,210.00

Disabled

Send toTheo MarshUSD

Balance $4,210.00

Icons animation

Disabled

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/amount-pad

Digits rise 12 px with a 4 px blur on a 520/30 spring, and commas slide into place.
Going past the limit or a third decimal shakes the amount for 360 ms.
Send walks Sending, Sent and back after 1.6 s.
With reduced motion, digits appear and nothing shakes.

Digits are keyed from the end, so only changed characters animate.
Number grouping is memoized, and the reset timer after Sent is cleared on unmount.

Give your coding assistant the Markdown reference instead of screenshots.

Import AmountPad from @/components/fetaui/amount-pad. It composes Button.
onSend gets a number. Resolve to show Sent, reject to show Try again.
limit only guards the display. Check the amount and the balance on your server.
Set to, initials and note, or the defaults show. The corner code follows currency ($ is USD, € is EUR), or set currencyName. The demo waits a timer and moves no money.