Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Input OTP Component - shadcn/ui Examples

About the shadcn/ui Input OTP Component

The Input OTP component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add input-otp` and copy it directly into your project.

Input OTP Component — Frequently Asked Questions

How do I auto-submit when the OTP is complete?

Use `onChange` to watch for when the value length equals the OTP length: `<InputOTP onChange={(val) => { if (val.length === 6) handleSubmit(val) }}>`. Trigger submission automatically.

How do I validate OTP format (numbers only)?

Use the `REGEXP_ONLY_DIGITS` pattern from `input-otp`: `<InputOTP pattern={REGEXP_ONLY_DIGITS}>`. Import it from the `input-otp` package.

How do I integrate shadcn InputOTP with React Hook Form?

The Form example shows the complete pattern using `<FormField>` with `Controller`. Use `field.onChange` with `<InputOTP onComplete={field.onChange}>`.