Glass OTP Input

A high-end frosted glassmorphic verification input featuring layered specular light reflections, glowing cursor carets, ambient aura backdrops, and spring physics.

Open in

Security Verification

Enter your code or test with

Resend authentication code in 45s

Component Overview & Selection Guide

Choose the Glass OTP Input for modern SaaS authentication, Web3 & passkey flows, developer platforms, and high-fidelity dark/light mode security verification experiences.

Primary Use Cases:

Two-Factor & Passkey Authentication: Ultra-sleek security check for modern web and mobile apps.
FinTech & Web3 Verification: High-fidelity token entry with tactile feedback and specular glass refraction.
Modern Developer Tools: Polished terminal-grade monospace aesthetic with ambient glow effects.

Features

Layered Frosted Glass Optics: Multi-surface specular highlights with inner edge reflections and backdrop blur.
Luminous Glowing Caret: Animated cursor beam with ambient neon bloom and smooth opacity pulsing.
Tactile State Transitions: Damped spring shake on validation error and crisp emerald illumination on success.
Hardware-Accelerated Motion: Fluid Framer Motion transitions, layout-aware focus transitions, and clipboard paste support.

Installation

bunx shadcn@latest add https://jackui.com/r/glass-otp-input.json

npx shadcn@latest add https://jackui.com/r/glass-otp-input.json

pnpm dlx shadcn@latest add https://jackui.com/r/glass-otp-input.json

The CLI will automatically install the motion and lucide-react dependencies and copy the component into your project at:

components/jackui/otp-input/glass-otp-input.tsx

Usage

"use client";

import React, { useState } from "react";
import { GlassOtpInput } from "@/components/jackui/otp-input/glass-otp-input";

export default function GlassTokenVerification() {
  const [token, setToken] = useState("");
  const [isError, setIsError] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center p-8">
      <GlassOtpInput
        length={6}
        value={token}
        onChange={setToken}
        onComplete={(val) => {
          if (val === "987654") setIsSuccess(true);
          else setIsError(true);
        }}
        isError={isError}
        isSuccess={isSuccess}
        autoFocus
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`length`	`number`	`6`	Total number of token slots.
`value`	`string`	`undefined`	Controlled value.
`onChange`	`(value: string) => void`	`undefined`	Change callback.
`onComplete`	`(value: string) => void`	`undefined`	Completion callback.
`type`	`"number" \| "text" \| "password"`	`"number"`	Input character type.
`mask`	`boolean`	`false`	Mask characters with glowing cipher dots.
`disabled`	`boolean`	`false`	Disable input.
`autoFocus`	`boolean`	`false`	Focus on mount.
`isError`	`boolean`	`false`	High-voltage red glow error pulse.
`isSuccess`	`boolean`	`false`	Cyber green success pulse.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Slot size preset.
`separator`	`React.ReactNode`	`undefined`	Optional separator element between slot groups.
`placeholder`	`string`	`""`	Placeholder string.
`className`	`string`	`""`	Container CSS classes.
`slotClassName`	`string`	`""`	Slot CSS classes.