63 / 221

[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; } }

A small detail. A different feeling.INTERACTIVE PREVIEW

Inputs/React

Animated O T P Input

by Smooth UI

pnpm dlx shadcn@latest add https://podie.dev/r/smooth--animated-o-t-p-input.json

Animated O T P Input by Smooth UI. A AnimatedOTPInput component for SmoothUI. Try the live React demo, inspect the original source, and install from PODIE.

React · Tailwind CSS · MIT license · Original registry

Yours in one command.