Clerk OTP

Cards

About

An animated OTP (One-Time Password) input component with random digits, customizable delay, hover control, and card customization for authentication flows.

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

Code

How Clerk OTP is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {ClerkOTP} from "@/components/ui/clerk-otp";

export default function ClerkOTPDemo() {
  return (
    <ClerkOTP
      delay={3500}
      cardTitle="Hover to Animate"
      cardDescription="Animation only triggers when hovering over the card. Random digits generated each time."
      whileHover={true} // Animation only on hover
    />
  )
}