PIN Keypad Unlock

Component 34

About

A full-height numeric keypad lock screen with PIN dots, a biometric shortcut, and a backspace key for mobile app locks and quick re-authentication.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds PIN Keypad Unlock to your project and fits it to your theme.

Code

How PIN Keypad Unlock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Auth30 } from "@/components/ui/auth30";

export default function Default() {
  return (
    <Auth30
      heading="Enter your PIN"
      description="Use your 4-digit PIN to unlock your account."
      pinLength={4}
      labels={{ biometric: "Use biometrics", backspace: "Delete" }}
      forgotPrompt={{
        text: "Forgot your PIN?",
        linkLabel: "Reset it",
        href: "https://beste.co",
      }}
    />
  );
}