Clerk Otp

Renders an animated OTP authentication card with random digits. It updates digits periodically and highlights active digits. Use for displaying OTP verification steps in a dynamic way.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/clerk-otp

npx layro-cli add @karthikmudunuri/clerk-otp

npx layro-cli add @karthikmudunuri/clerk-otp

bunx layro-cli add @karthikmudunuri/clerk-otp

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useEffect, useState } from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

const generateRandomDigits = () => {
  return Array.from({ length: 6 }, () =>
    Math.floor(Math.random() * 10).toString()
  )
}

type AnimatedOTPProps = {