Ribbon OTP

Forms

About

A one-time verification-code input that reads as a single divided ribbon instead of six separate boxes, with per-digit drop animation, keyboard/paste support, and a success sweep or error shake on completion.

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

Code

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

Usage.tsx

"use client";

import RibbonOtp from "@/components/ui/ribbon-otp";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full flex-col items-center justify-center gap-4 bg-[#0b080d] p-8">
      <RibbonOtp
        verify={(c) => c === "482913"}
        label="Enter the 6-digit code we sent you"
      />
      <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-white/35">
        Demo code: 482913 · paste works
      </p>
    </div>
  );
}