KQ-735 · TAP/READER
Tap Reader
A card reader's display: the amount above, a ring in the middle, one line of state below. Ready, a short arc at the top breathes on a mirrored opacity tween; the ring is a real button that squashes on flick, and the host answers the tap by moving status to reading, which sets the arc spinning on a linear tween. On approved the spinner finishes its turn to the top and grows into a full ring on glide while a check draws inside it on flick; on declined the ring turns danger, shakes on a five-keyframe tween and a cross draws. The button's accessible name carries the state and the amount, Enter and Space press it, and the state line is a status region announced once per outcome.
Hold your card to the reader
Ready · $24.60
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tap-reader
Props
- status
- "ready" | "reading" | "approved" | "declined"
- default —
- Controlled; the outcome comes from the host.
- amount
- number
- default —
- The sale, in major units.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Formats the amount. The default pins an explicit locale so server and client agree.
- label
- string
- default "Card reader"
- Names the reader, top left.
- reference
- string
- default —
- A sale reference shown top right.
- messages
- Partial<Record<TapReaderStatus, string>>
- default —
- Overrides the state line copy per status.
- onTap
- () => void
- default —
- Fires from the press while ready.
- onReset
- () => void
- default —
- Fires from the press after an outcome, when the button reads New sale or Try again.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "ready" | "reading" | "approved" | "declined" | — | Controlled; the outcome comes from the host. |
| amount | number | — | The sale, in major units. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Formats the amount. The default pins an explicit locale so server and client agree. |
| label | string | "Card reader" | Names the reader, top left. |
| reference | string | — | A sale reference shown top right. |
| messages | Partial<Record<TapReaderStatus, string>> | — | Overrides the state line copy per status. |
| onTap | () => void | — | Fires from the press while ready. |
| onReset | () => void | — | Fires from the press after an outcome, when the button reads New sale or Try again. |