ai 2

Glass OTP Input

Forms 1

About

A one-time-password / verification-code input made of frosted-glass digit cells, with five decorative surface variants (frost, tint, smoke, crystal, depth) and sizes from sm to xl.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass OTP Input to your project and fits it to your theme.

Code

How Glass OTP Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import InputOtpGlass, { TintOtp } from "@/components/ui/input-otp-glass";

export default function InputOtpGlassDemo() {
  return (
    <div className="flex min-h-[240px] w-full items-center justify-center p-10">
      <TintOtp length={6} defaultValue="482913" />
    </div>
  );
}

More by ai 2

View all
  • Ripple Buttons

    Ripple Buttons

    31
  • Styled Toggle Switches

    Styled Toggle Switches

    17
  • Styled Progress Bars

    Styled Progress Bars

    15
  • Styled Badges

    Styled Badges

    10
  • Particle Toggles

    Particle Toggles

    8
  • OTP Pin Input

    OTP Pin Input

    8
  • Combo Kbd

    Combo Kbd

    7
  • Shapes Skeleton

    Shapes Skeleton

    6

More in Forms

View all
  • Premium Auth

    Premium Auth

    524
  • Contact Card

    Contact Card

    1K
  • Book A Demo 1

    Book A Demo 1

    73
  • Login 1

    Login 1

    53
  • Form

    Form

    137
  • Card Studio

    Card Studio

    41
  • SignInPage

    SignInPage

    668
  • Modern & Stunning sign in

    Modern & Stunning sign in

    1.6K