ns-ui
6-box code entry where each box is a tiny slot-machine cipher reel: keystrokes spin a canvas glyph strip into a weighted detent on the typed digit with an accent flash; backspace reverse-spins to blank and idle cells carry a faint ambient drift.
Use when a short one-time code entered digit by digit, where each keystroke should land with mechanical certainty as the reel spins into a detent and reverse-spins to blank on backspace, with real one-time-code autofill semantics underneath; pick card-number-emboss instead when the field is a long formatted payment number rather than a short code, or copy-field-crimp when the user is copying a value out rather than typing one in.
Install
npx shadcn add https://design.helpmarq.comns-ui / otp-reel — every box is a slot reel
We sent a 6-digit code to +1 (415) ••• ••32. Enter it below to finish signing in.
attempt 1 of 5
Type to spin a reel into its detent, Backspace reverse-spins it out, paste a full code for the staggered cascade. Idle boxes keep a faint cipher drift.
| Prop | Type | Default | Description |
|---|---|---|---|
| length? | number | 6 | number of reel cells; fixed at mount |
| label? | string | "Verification code" | visible legend labelling the group |
| helperText? | string | — | muted helper line under the reels |
| error? | boolean | false | flip true to shake the row and scramble the reels clear |
| errorMessage? | string | "That code didn't match. Try again." | helper line while error is set — the only place the error token appears |
| disabled? | boolean | false | — |
| autoFocus? | boolean | false | — |
| onChange? | (code: string) => void | — | — |
| onComplete? | (code: string) => void | — | — |
| className? | string | — | — |