Pin Pad

A numeric keypad for PINs and passcodes. Dots fill with a small pop as digits go in, a wrong PIN shakes the row and clears it, and a right one turns the dots green. Every key is a full-size button with a spoken label, and the dots announce progress as a single value. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add pin-pad

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/pin-pad.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { PinPad } from "@/components/ui/pin-pad";

export default function Example() {
  return (
    <PinPad
      title="Enter your PIN"
      onComplete={async (pin) => {
        const response = await fetch("/api/unlock", { method: "POST", body: pin });
        return response.ok;
      }}
    />
  );
}

Props