Otp Slots

Renders a set of input slots for entering an OTP code. It displays each character in a slot and animates transitions when filled or hovered. Use it for secure authentication forms requiring one-time passwords.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/otp-slots

npx layro-cli add @educlopez/otp-slots

npx layro-cli add @educlopez/otp-slots

bunx layro-cli add @educlopez/otp-slots

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { OTPInput, OTPInputContext } from "input-otp";
import { MinusIcon } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useContext, useEffect, useState } from "react";

// Animation constants
const EASE_OUT_QUINT_X1 = 0.22;
const EASE_OUT_QUINT_Y1 = 1;
const EASE_OUT_QUINT_X2 = 0.36;
const EASE_OUT_QUINT_Y2 = 1;
const EASE_OUT_QUINT = [