Simple Password Lock

The Password Lock component places a full-screen overlay in front of your entire website. Visitors are prompted to enter a password before they can view or interact with your content. Once the correct password is entered, the overlay disappears completely, allowing the page to become fully interactive again.

Unlike static overlays, this lock uses a portal to the document body, so it truly covers the whole site without layout hacks. Perfect for prototypes, gated demos, or light content previews where you want a simple password gate without server configuration.

⚠️ Note: this is a client-side lock. For secure production use, rely on server-side authentication.

Features

• ✔︎ Full-page overlay rendered in a portal to body

• ✔︎ Custom prompt text, background, and colors

• ✔︎ Responsive UI that scales with any viewport

• ✔︎ Font and border radius customization

• ✔︎ Optional session persistence to skip re-entering password for a set time

Property Controls

• Password: The required password (hidden input).

• Prompt: Message shown above the input.

• Background: Overlay background color.

• Text Color: Color for text and UI elements.

• Font: Customize font family, size, weight, spacing, line height.

• Border Radius: Roundness of input and button elements.