Auth

Link sent

Confirmation that a magic sign-in link was emailed, with a resend action.

Check your email

We emailed a magic link to mara@cooud.io. Click it to sign in.

The link expires in 10 minutes.

Back to sign in

Installation

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

CLI

Add Magic Link to your app with its source-owned dependencies.

bash

npx cooud-ui add magic-link

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 MagicLinkSentBlock() {
  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 email</CardTitle>
            <p className="text-sm text-fg-secondary">
              We emailed a magic link to mara@cooud.io. Click it to sign in.
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <p className="text-center text-sm text-fg-tertiary">The link expires in 10 minutes.</p>

          <Button variant="outline" className="w-full">
            Resend link
          </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>
  );
}