Password recovery workflow.
Enter your email and we’ll send a link to reset your password.
If an account exists for jamie@example.com, a reset link is on its way.
<div class="preset" data-stage="Request" style="--accent:#A8E6C1;">
<h3 class="preset__heading">Reset your password</h3>
<div class="preset__request">
<p class="preset__copy">Enter your email and we’ll send a link to reset your password.</p>
<label class="preset__field">
<span class="preset__label">Email</span>
<input type="email" value="jamie@example.com" autocomplete="username" />
</label>
<button type="submit" class="preset__submit">Send reset link</button>
</div>
<div class="preset__sent">
<p class="preset__copy">If an account exists for jamie@example.com, a reset link is on its way.</p>
<label class="preset__field">
<span class="preset__label">New password</span>
<div class="preset__pwrap">
<input type="password" autocomplete="new-password" />
<button type="button" class="preset__toggle" aria-pressed="false" aria-label="Show new password">Show</button>
</div>
</label>
<button type="submit" class="preset__submit">Set new password</button>
</div>
</div>
<style>
.preset { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }
.preset__heading { margin: 0 0 10px; font-size: 16px; }
.preset__copy { margin: 0 0 14px; font-size: 13px; color: #24143099; }
.preset__field { display: block; margin-bottom: 14px; }
.preset__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.preset input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }
.preset__pwrap { position: relative; }
.preset__pwrap input { padding-right: 56px; }
.preset__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #241430; font-weight: 700; font-size: 12px; padding: 4px 6px; }
.preset__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; }
.preset__request, .preset__sent { display: none; }
.preset[data-stage="Request"] .preset__request { display: block; }
.preset[data-stage="Sent"] .preset__sent { display: block; }
</style><div class="w-[300px] p-5 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] preset-tw" data-stage="Request">
<h3 class="m-0 mb-2.5 text-base">Reset your password</h3>
<div class="preset-tw-request">
<p class="m-0 mb-3.5 text-[13px] text-[#241430]/60">Enter your email and we’ll send a link to reset your password.</p>
<label class="block mb-3.5">
<span class="block mb-1 font-semibold text-[13px]">Email</span>
<input type="email" value="jamie@example.com" autocomplete="username" class="w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]" />
</label>
<button type="submit" class="w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]" style="background:#A8E6C1">Send reset link</button>
</div>
<div class="preset-tw-sent">
<p class="m-0 mb-3.5 text-[13px] text-[#241430]/60">If an account exists for jamie@example.com, a reset link is on its way.</p>
<label class="block mb-3.5">
<span class="block mb-1 font-semibold text-[13px]">New password</span>
<div class="relative">
<input type="password" autocomplete="new-password" class="w-full box-border px-2.5 py-2 pr-14 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]" />
<button type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 border-none bg-transparent cursor-pointer text-[#241430] font-bold text-xs px-1.5 py-1" aria-pressed="false" aria-label="Show new password">Show</button>
</div>
</label>
<button type="submit" class="w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]" style="background:#A8E6C1">Set new password</button>
</div>
</div>
<style>
.preset-tw-request, .preset-tw-sent { display: none; }
[data-stage="Request"] .preset-tw-request { display: block; }
[data-stage="Sent"] .preset-tw-sent { display: block; }
</style>export function PasswordReset({
heading = "Reset your password",
stage = "Request",
email = "jamie@example.com",
showPassword = false,
accent = "#A8E6C1",
}) {
const inputStyle = { width: "100%", boxSizing: "border-box", padding: "9px 10px", borderRadius: 8, border: "1.5px solid #24143030", font: "inherit" };
const submitStyle = { width: "100%", padding: 10, borderRadius: 8, border: "none", background: accent, color: "#14351f", fontWeight: 700, cursor: "pointer" };
return (
<div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: 20, borderRadius: 14, boxSizing: "border-box", border: "1px solid #24143018" }}>
<h3 style={{ margin: "0 0 10px", fontSize: 16 }}>{heading}</h3>
{stage === "Request" ? (
<div>
<p style={{ margin: "0 0 14px", fontSize: 13, color: "#24143099" }}>Enter your email and we’ll send a link to reset your password.</p>
<label style={{ display: "block", marginBottom: 14 }}>
<span style={{ display: "block", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Email</span>
<input type="email" defaultValue={email} autoComplete="username" style={inputStyle} />
</label>
<button type="submit" style={submitStyle}>Send reset link</button>
</div>
) : (
<div>
<p style={{ margin: "0 0 14px", fontSize: 13, color: "#24143099" }}>If an account exists for {email}, a reset link is on its way.</p>
<label style={{ display: "block", marginBottom: 14 }}>
<span style={{ display: "block", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>New password</span>
<div style={{ position: "relative" }}>
<input type={showPassword ? "text" : "password"} autoComplete="new-password" style={{ ...inputStyle, paddingRight: 56 }} />
<button type="button" aria-pressed={showPassword} aria-label="Show new password"
style={{ position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)", border: "none", background: "none", cursor: "pointer", color: "#241430", fontWeight: 700, fontSize: 12, padding: "4px 6px" }}>
{showPassword ? "Hide" : "Show"}
</button>
</div>
</label>
<button type="submit" style={submitStyle}>Set new password</button>
</div>
)}
</div>
);
}