React Input OTP - OTP with Success State

Input OTP - States pattern component

Looking to implement shadcn/ui patterns?

Join our Discord community for help from other developers.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Loading preview...

Pattern created by @haydenbleasel

Installation

npx shadcn@latest add https://www.shadcn.io/registry/input-otp-states-4.json

npx shadcn@latest add https://www.shadcn.io/registry/input-otp-states-4.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/input-otp-states-4.json

bunx shadcn@latest add https://www.shadcn.io/registry/input-otp-states-4.json

React Input OTP - OTP with Error State

Input OTP - States pattern component

React Input OTP - Email Verification Flow

Input OTP - Use Cases pattern component

React Input OTP - OTP with Success State

Installation

On this page