Components

OTP Input

One-time-code entry: one cell per digit, each popping on a snappy spring as it fills while the accent ring tracks the active cell.

Type or paste any 4 digits.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add otp-input

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { OtpInput } from "@lumora/ui/components/otp-input";
// or from the barrel:
import { OtpInput } from "@lumora/ui";

Props worth knowing

length sets the digit count (default 6). onChange fires per keystroke and onComplete once every cell is filled; pasting a full code distributes it across the cells. label names the group for assistive tech. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.