# Pin Input components

> Browse 6 Pin Input components for React, styled with Tailwind CSS and ready for your Next.js project.

48 components available. Showing all of them below.

- [Pin Input](https://21st.dev/@anubra266/components/pin-input.md) — by Abraham
- [Pin Input](https://21st.dev/@anubra266/components/pin-input/pin-two-factor.md) — by Abraham
- [Pin Input](https://21st.dev/@anubra266/components/pin-input/pin-verification.md) — by Abraham
- [Pin Input](https://21st.dev/@anubra266/components/pin-input/pin-input-custom-placeholder.md) — by Abraham
- [Pin Input](https://21st.dev/@anubra266/components/pin-input/pin-with-field.md) — by Abraham
- [Pin Input](https://21st.dev/@anubra266/components/pin-input/pin-input-masked.md) — by Abraham
- [Dialog](https://21st.dev/@originui/components/dialog/otp-dialog.md) — by Origin UI
- [Input](https://21st.dev/@originui/components/input/otp-input-spaced.md) — by Origin UI
- [Input](https://21st.dev/@originui/components/input/otp-input-single.md) — by Origin UI
- [Input](https://21st.dev/@originui/components/input/otp-input-double.md) — by Origin UI
- [OTP Verify](https://21st.dev/@minhxthanh/components/otp-verify.md) — by Le Thanh
- [Input OTP](https://21st.dev/@jshguo/components/interfaces-input-otp.md) — by jshguo
- [OTP Dialog](https://21st.dev/@ruixen.ui/components/otpdialog.md) — by Ruixen UI
- [BeUI OTP Input](https://21st.dev/@saurabh10102/components/be-ui-otp-input.md) — by Saurabh Chauhan
- [The Dialog](https://21st.dev/@felipemenezes098/components/the-dialog/verify-code-otp.md) — by felipemenezes098
- [Identity Verification Dialog](https://21st.dev/@ruixen.ui/components/identity-verification-dialog.md) — by Ruixen UI
- [Input OTP](https://21st.dev/@shadcn/components/input-otp.md) — by shadcn
- [Input OTP](https://21st.dev/@jshguo/components/interfaces-input-otp/alphanumeric.md) — by jshguo
- [Otp Input](https://21st.dev/@educlopez/components/otp-input.md) — by Edu Calvo
- [OTP Input](https://21st.dev/@minhxthanh/components/otp-input.md) — by Le Thanh
- [OTP Input](https://21st.dev/@avanishverma4/components/otp-input.md) — by Awanish Verma
- [Animated OTP](https://21st.dev/@amanshakya1808/components/animated-otp.md) — by Aman Shakya
- [OTP Input](https://21st.dev/@itsankitverma/components/otp-input.md) — by Ankit Verma
- [Two-Factor Authentication Block](https://21st.dev/@preetsuthar17/components/two-factor-authentication-block.md) — by Preet Suthar
- [OTP Input](https://21st.dev/@ruixen.ui/components/otpinput.md) — by Ruixen UI
- [Input OTP](https://21st.dev/@preetsuthar17/components/input-otp.md) — by Preet Suthar
- [Number Pad](https://21st.dev/@bankkroll/components/number-pad.md) — by Bankk
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps.md) — by ShadcnStudio
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps/input-otp-separator.md) — by ShadcnStudio
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps/input-otp-resend.md) — by ShadcnStudio
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps/input-otp-minimal.md) — by ShadcnStudio
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps/input-otp-outlined.md) — by ShadcnStudio
- [Input OTPs](https://21st.dev/@ShadcnStudio/components/input-otps/input-otp-alphanumeric.md) — by ShadcnStudio
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp.md) — by Hero Ui
- [Reshaped Pin field](https://21st.dev/@reshaped/components/reshaped-pin-field.md) — by reshaped
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/variants.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/form-example.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/with-validation.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/controlled.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/in-surface.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/on-complete.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/with-pattern.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/disabled-state.md) — by Hero Ui
- [HeroUI Input OTP](https://21st.dev/@hero_ui/components/heroui-input-otp/four-digits.md) — by Hero Ui
- [Reshaped Pin field](https://21st.dev/@reshaped/components/reshaped-pin-field/form-control.md) — by reshaped
- [Reshaped Pin field](https://21st.dev/@reshaped/components/reshaped-pin-field/faded.md) — by reshaped
- [Reshaped Pin field](https://21st.dev/@reshaped/components/reshaped-pin-field/sizes.md) — by reshaped
- [Reshaped Pin field](https://21st.dev/@reshaped/components/reshaped-pin-field/value-length.md) — by reshaped

Full component directory: https://21st.dev/llms.txt