RetroInputOTP

A one-time password input with Mac OS 9 beveled digit slots and blinking caret.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-input-otp.json"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json

Import

import { RetroInputOTP } from "@/components/ui/retro-input-otp"

A one-time password input with OS9 styling. Each digit appears in a beveled input slot with a blinking caret. Built on input-otp.

6-Digit Code (3 + 3)

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

–

4-Digit PIN

6 Digits (Single Group)

Click to focus, then type digits. The active slot shows a blinking caret. Use Backspace to delete. The separator provides a visual break between groups.

View source Back to overview