Components
Loading preview...
Pixel-art one-time-password input from 8bitcn.com — chunky pixel borders on each slot with focus caret.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-input-otp"use client";
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/8bit-input-otp";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<div className="space-y-3">
<div className="text-xs font-pixel uppercase tracking-widest text-muted-foreground">
Enter Code
</div>
<InputOTP maxLength={4}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>
</div>
</div>
);
}