Passkey

Passwordless authentication credential.

html

<div class="pk" style="--accent:#A8E6C1;">
  <span class="pk__icon"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="10" cy="14" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M15 14h11M22 14v4M18 14v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
  <h3 class="pk__heading">Sign in with a passkey</h3>
  <p class="pk__account">jamie@example.com</p>
  <button type="button" class="pk__submit" data-device="This device">Continue with This device</button>
  <button type="button" class="pk__alt">Use a password instead</button>
</div>
<style>
.pk { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 24px; border-radius: 16px; box-sizing: border-box; border: 1px solid #24143018; text-align: center; }
.pk__icon { display: inline-flex; color: var(--accent); background: #24143008; padding: 10px; border-radius: 999px; margin-bottom: 10px; }
.pk__heading { margin: 0 0 6px; font-size: 16px; }
.pk__account { margin: 0 0 18px; font-size: 13px; color: #24143099; }
.pk__submit { width: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.pk__alt { width: 100%; padding: 9px; border-radius: 8px; border: none; background: none; color: #241430; text-decoration: underline; cursor: pointer; font: inherit; }
.pk__submit:focus-visible, .pk__alt:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-6 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] text-center">
  <span class="inline-flex bg-[#24143008] p-2.5 rounded-full mb-2.5" style="color:#A8E6C1"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="10" cy="14" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M15 14h11M22 14v4M18 14v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
  <h3 class="m-0 mb-1.5 text-base">Sign in with a passkey</h3>
  <p class="m-0 mb-4 text-[13px] text-[#241430]/60">jamie@example.com</p>
  <button type="button" class="w-full py-3 rounded-lg border-none font-bold cursor-pointer text-[#14351f] mb-2.5" style="background:#A8E6C1" data-device="This device">Continue with This device</button>
  <button type="button" class="w-full py-2 rounded-lg border-none bg-transparent text-[#241430] underline cursor-pointer">Use a password instead</button>
</div>

react

export function Passkey({
  heading = "Sign in with a passkey",
  account = "jamie@example.com",
  device = "This device",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: 24, borderRadius: 16, boxSizing: "border-box", border: "1px solid #24143018", textAlign: "center" }}>
      <span style={{ display: "inline-flex", color: accent, background: "#24143008", padding: 10, borderRadius: 999, marginBottom: 10 }}>
        <svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="10" cy="14" r="6" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M15 14h11M22 14v4M18 14v3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
      </span>
      <h3 style={{ margin: "0 0 6px", fontSize: 16 }}>{heading}</h3>
      <p style={{ margin: "0 0 18px", fontSize: 13, color: "#24143099" }}>{account}</p>
      <button type="button" style={{ width: "100%", padding: 11, borderRadius: 8, border: "none", background: accent, color: "#14351f", fontWeight: 700, cursor: "pointer", marginBottom: 10 }}>Continue with {device}</button>
      <button type="button" style={{ width: "100%", padding: 9, borderRadius: 8, border: "none", background: "none", color: "#241430", textDecoration: "underline", cursor: "pointer", font: "inherit" }}>Use a password instead</button>
    </div>
  );
}