OTP Input

An animated 6-digit OTP verification input with success/error states and smooth animations.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/otp-input.json"

Install Manually

Install dependencies

npm install motion lucide-react clsx tailwind-merge

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Copy the source code

Copy the code into components/block/otp-input.tsx

Usage

Code

1import { OTPInput } from "@/components/block/otp-input"
2
3export function Demo() {
4return (
5  <OTPInput
6    correctOTP="424242"
7    onSuccess={() => console.log("Verified!")}
8    onError={() => console.log("Invalid OTP")}
9  />
10)
11}

Props

Prop	Type	Default	Description
correctOTP	`string`	`"424242"`	The correct OTP code
onSuccess	`() => void`	`-`	Callback on success
onError	`() => void`	`-`	Callback on error