Auth

Link sent

Confirmation that a reset link was emailed, with a resend action.

Check your inbox

We sent a password reset link to mara@cooud.io.

Didn't get it? Check your spam folder, or resend below.

Back to sign in

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Forgot Password to your app with its source-owned dependencies.

bash

npx cooud-ui add forgot-password

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Link sent. Every class is a semantic token, so it re-themes with your app.

tsx

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cooud-ui/ui";
import { ArrowLeft, MailCheck } from "lucide-react";

export function ForgotPasswordSentBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-sm gap-6 shadow-lg">
        <CardHeader className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex size-11 items-center justify-center rounded-xl bg-success/10 text-success">
            <MailCheck className="size-5" aria-hidden="true" />
          </span>
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">Check your inbox</CardTitle>
            <p className="text-sm text-fg-secondary">
              We sent a password reset link to mara@cooud.io.
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <p className="text-sm text-fg-secondary text-center">
            Didn&apos;t get it? Check your spam folder, or resend below.
          </p>

          <Button variant="gradient" size="lg" className="w-full">
            Resend email
          </Button>
        </CardContent>

        <CardFooter className="justify-center">
          <a
            href="#signin"
            className="inline-flex items-center justify-center gap-1.5 text-sm font-medium text-fg-secondary transition-colors hover:text-fg"
          >
            <ArrowLeft className="size-4" aria-hidden="true" />
            Back to sign in
          </a>
        </CardFooter>
      </Card>
    </div>
  );
}