Email SDK
UIAccount

Password reset

A secure reset action with request context.

Email preview
FromAcme <hello@acme.com>SubjectReset your passwordPreviewReset your password within the next 30 minutes

Installation

npx shadcn@latest add https://email-sdk.dev/r/password-reset.json

Copy this template into your app and customize its props, words, and links.

src/ui/email/password-reset.tsx
import {
  EmailButton,
  EmailCard,
  EmailHeading,
  EmailText,
  ShadcnEmail,
} from "@opencoredev/email-sdk/react";

export function PasswordResetEmail({ resetUrl }: { resetUrl: string }) {
  return (
    <ShadcnEmail preview="Reset your password within the next 30 minutes">
      <EmailCard>
        <EmailHeading>Reset your password</EmailHeading>
        <EmailText>
          We received a request to reset the password for your Acme account.
        </EmailText>
        <EmailButton href={resetUrl}>Reset password</EmailButton>
        <EmailText muted style={{ fontSize: 13, marginTop: 20 }}>
          This link expires in 30 minutes. The request came from Safari on macOS.
        </EmailText>
      </EmailCard>
    </ShadcnEmail>
  );
}

On this page