This component creates a secure 6-digit password protection screen that locks your entire Framer site until the correct code is entered. It displays a full-screen overlay with OTP-style input fields and prevents access to your content until users enter the right password.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Add the component to your page (it will automatically create a full-screen overlay when published)
Set your 6-digit password in the "Password" field in the property controls
Customize the appearance including background color, input box width/height, spacing between boxes, input colors, fonts, border styles (width, style, color, radius), and focus states (border color and background when active)
Edit the hint text message, color, spacing, and font to guide your users
Toggle "Remember Password" on if you want the browser to save the password for returning visitors
Preview or publish your site to test the password protection
The component works by overlaying your entire site with a password screen. You'll set a 6-digit password in the property controls. When visitors enter the correct code, the overlay disappears and they can access your site. You can customize everything from the input box sizes, colors, and spacing to the border styles and hint text. There's also a "Remember Password" option that stores the password locally so returning visitors don't need to re-enter it. The input fields automatically focus and advance as you type, and you can even paste a 6-digit code directly.
This is a client-side password protection component. It's ideal for casual access control like client previews and soft content gating, but shouldn't be used for protecting highly sensitive information that requires server-side authentication.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
