Semaphore
One-time code. Boxes that fill as you type, take a pasted code whole, and say when the code is complete.
- Component
- One-time code
- Pattern
- Grouped inputs + one-time-code
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Semaphore · React + TailwindFull width
| Keys | What happens |
|---|---|
| 0–9 | Fill the focused box and move on to the next. |
| Backspace | Clear the box, or step back and clear the one before. |
| ← → | Move between boxes without changing them. |
| Ctrl + VorCmd + V | Paste the whole code: it fills the boxes from where you are. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/otp.json"Run it in your project root. It writes components/otp.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).