React component · v1.0.0
Lamp Login
A sign-in screen that stays dark until you pull the cord.
$29 USD · one-time · plus tax where applicable
Buy Lamp Login · $29Instant download · support included · all sales final
What it does
The room starts unlit and the form is hidden. Pull the brass cord and the lamp comes on, revealing the sign-in form. Pull it again and the room goes dark. It turns a screen people skip past into one they actually touch.
Pull-cord toggle
Drag, click or press Enter. The cord is a real switch.
Any auth
You pass in your sign-in function. Supabase, Clerk, Firebase, Auth.js or your own API.
Light & dark
Every colour, radius and font is a CSS variable, scoped to the component.
Accessible
Keyboard operable, real labels, password managers work, reduced motion respected.
Mobile-ready
On small screens the form shows straight away, with no cord to drag.
No outside requests
Fonts are bundled. The component never calls Google or anyone else.
In the zip
What’s included
- Complete, unminified source
- React component with 8 optional props
- Scoped CSS + design tokens
- Self-hosted Geist fonts
- Runnable Vite demo
- README with setup, props and theming
- Commercial licence for unlimited projects
Requires React 18 or 19 and framer-motion 11+. Works in Vite, Next.js, Remix and Astro.
Drop it in
Setup
import LampLogin from './LampLogin';
import './tokens.css';
import './LampLogin.css';
<LampLogin
brandName="Your App"
signUpHref="/signup"
onSignIn={async (email, password) => {
const res = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
if (!res.ok) throw new Error("That didn't match.");
}}
/>API
Props
All optional. With none passed, you get a working, inert demo.
| Prop | Type | Notes |
|---|---|---|
onSignIn | (email, password) => Promise | Throw to show an inline error |
onGoogleSignIn | () => Promise | Omit to hide the Google button |
onForgotPassword | (email) => Promise | Omit to hide the reset link |
brandName | string | Shown beside the mark |
title | string | Card heading |
signUpHref | string | Omit to hide the sign-up line |
logo | ReactNode | Replaces the lettermark tile |
startLit | boolean | Open with the lamp already on |
Make your sign-in the part people remember.
Commercial licence · support included · all sales final