Password Locker Pro
Password Locker Pro lets you lock any Framer page behind a beautiful, custom-designed password screen. You can design the lock screen exactly how you like
Make it with Workshop
Build your own component with AI
About this Component
Password Locker Pro is a full-screen, responsive page locker for Framer. It works entirely on the client side, is easy to set up, and gives you total design freedom. Unlike generic password gates, you can design your lock screen exactly the way you want — with your own images, colors, text, and layout — for desktop, tablet, and mobile.
How to Set It Up:
Create Three frames in your Framer project — one for Desktop, one for Tablet, and one for Mobile.
Inside each frame, add a Stack (this is important because in Framer only Stacks can have an ID).
Both the frame and the stack will automatically fill the full viewport width and height once connected to the component.
Design your lock screen freely inside each stack — add text, images, backgrounds, animations, etc.
Add a form inside each stack using the Framer Form Builder:
One text input (it will automatically become a password field).
One submit button.
Assign IDs to your stacks (must match exactly):
Desktop → locker-desktop
Tablet → locker-tablet
Mobile → locker-mobile
Add the Password Protect Individual Pages component at the top of your page and configure its settings:
Set your desired password.
Link each stack to the matching device slot.
(Optional) Adjust breakpoints to fit your design.
Publish or preview your page — the correct lock screen will show for each device size, and visitors must enter the correct password to unlock your content.
✅ You’re not stuck with a plain lock screen — this component is built for flexibility so you can match it perfectly to your site’s style.
