ObsidianUIObsidianUI
DocumentationOTP Input

OTP Input

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

Install using CLI

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

Install Manually

1

Install dependencies

npm install framer-motion lucide-react clsx tailwind-merge
2

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));
}
3

Copy the source code

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

Usage

1import { OTPInput } from "@/components/ui/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 NameTypeDefaultDescription
correctOTPstring"424242"The correct OTP code
onSuccess() => void-Callback on success
onError() => void-Callback on error
Neumorphism 3D ButtonPerspective Grid