A one-time code screen built on a single native input under a segmented rail: digits drop into their slots, a glowing bar glides to the next one and the code checks itself when complete. A delivery switch for text, email or call, a depleting resend ring, attempt limits and a verifying sweep complete the flow.
We texted a 6-digit code to +1 (415) ••• ••82. It expires in 10 minutes.
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-otp-verify.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-otp-verify.tsx.
import { AuthFlowOtpVerify } from "@/components/hyperblur/auth-flow-otp-verify"
<AuthFlowOtpVerify destinations={{ sms: "+1 (415) ••• ••82", email: "m•••@acme.com" }} onVerify={async (code) => api.verify(code)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Enter the code we sent" | Heading before the code is verified. |
| length | number | 6 | Number of digits. Even lengths show a divider in the middle. |
| destinations | Partial<Record<"sms" | "email" | "call", string>> | masked phone, email and phone | Masked destination per delivery method. Methods without a value are hidden from the switch. |
| defaultChannel | "sms" | "email" | "call" | "sms" | Delivery method selected at first. |
| defaultValue | string | "" | Digits prefilled in the rail. |
| resendSeconds | number | 30 | Seconds before the resend button unlocks. The ring around it depletes over this time. |
| maxAttempts | number | 3 | Wrong codes allowed before a new code must be requested. |
| onVerify | (code: string, channel) => boolean | void | Promise<boolean | void> | Called when every digit is filled. Return or resolve false to reject the code. Without it every code is accepted after a short delay. | |
| onResend | (channel) => void | Called when a new code is requested. | |
| onChannelChange | (channel) => void | Called when the delivery method changes. | |
| onBack | () => void | Called by the Go back link and by Escape, to return to the previous screen. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of the title. |
| accent | string | "#22d3ee" | Bar, caret, ring and focus color. |