Pro

Amount pad

Amount entry in the style of a payments app: the figure is the screen. Each digit rises into place, the figure shrinks to fit as it grows, and a key that would break the amount (a third decimal, over the limit) shakes it instead of being refused silently.

Pro

pnpm dlx shadcn@latest add @caliper/amount-pad

Send to Maya Okafor

Rent split · October

Balance $1,240.00

Installs components/ui/amount-pad.tsxDepends on lucide-reactMotion honours reduced motion

When to use

Use it for

Sending, requesting or topping up money on phones and kiosks.
Any single amount that deserves the whole screen: a tip, a pledge, a budget.

Skip it when

Forms with several fields; use `MoneyField`.
Desktop flows where people type amounts with a full keyboard anyway.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Shake, don't swallow: A key that would make the amount invalid shakes the figure and keeps the last good value, so people learn the rule without an error message.
Fit by scale: The figure keeps one type size and scales down to its container, so it never wraps or jumps.
Keyboard and voice: With the figure focused, digits, the decimal point and Backspace work from the keyboard; the formatted amount is announced politely.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/amount-pad

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from AmountPad and nextAmount.

example.tsx

import { AmountPad, nextAmount } from "@/components/ui/amount-pad"

The worked example comes with Pro

The 31-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

AmountPad

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

valuestring—The amount as typed, e.g. "12.5". Leave it out to let the pad keep its own.

defaultValuestring"0"

onValueChange((value: string, amount: number) => void)—

maxnumber—Largest amount allowed; going over shakes the figure and keeps the last good value.

currencystring"$"

labelstring"Amount"Names the amount for assistive technology.

hintReactNode—A line under the figure, such as a balance or a limit.

nextAmount

component

No props of its own; it accepts the native props of its root element.

It exposes group semantics, with aria-label, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

BackspaceRemoves the previous character or item.

DeleteRemoves the next character or the selected item.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.