Verify Email

An email-confirmation message with a verify button and a fallback one-time code.

Cooud

Confirm your email address

Tap the button below to verify your email and activate your Cooud account.

Or paste this code:

382 914

This code expires in 30 minutes.

If you didn't create an account you can ignore this email.

Cooud, Inc. · 2261 Market St, San Francisco

Installation

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

CLI

Add Verify Email to your app with its source-owned dependencies.

bash

npx cooud-ui add email-verify

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 Verify Email. Every class is a semantic token, so it re-themes with your app.

tsx

import { Button, Card } from "@cooud-ui/ui";

export function EmailVerifyBlock() {
  return (
    <div className="flex justify-center bg-surface-inset/40 p-6">
      <Card className="w-full max-w-xl gap-0 overflow-hidden p-0 shadow-lg">
        <div className="flex justify-center border-b border-border/60 px-8 py-6">
          <span className="inline-flex items-center gap-2">
            <span className="inline-flex size-7 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
              <span className="size-3 rounded-sm bg-primary-foreground/90" aria-hidden="true" />
            </span>
            <span className="font-display text-lg font-semibold tracking-tight">Cooud</span>
          </span>
        </div>

        <div className="flex flex-col gap-5 px-8 py-8">
          <h1 className="font-display text-2xl font-semibold tracking-tight">
            Confirm your email address
          </h1>
          <p className="text-sm leading-relaxed text-fg-secondary">
            Tap the button below to verify your email and activate your Cooud account.
          </p>

          <div>
            <Button variant="gradient" size="lg">
              Verify email
            </Button>
          </div>

          <div className="flex flex-col gap-3">
            <p className="text-sm text-fg-secondary">Or paste this code:</p>
            <span className="inline-flex w-fit items-center rounded-lg border border-border bg-surface-inset/60 px-5 py-3 font-mono text-2xl font-semibold tracking-[0.4em] text-fg">
              382 914
            </span>
          </div>

          <p className="text-xs text-fg-tertiary">This code expires in 30 minutes.</p>
        </div>

        <div className="flex flex-col gap-1 border-t border-border/60 px-8 py-6 text-xs text-fg-tertiary">
          <p>If you didn&apos;t create an account you can ignore this email.</p>
          <p>Cooud, Inc. · 2261 Market St, San Francisco</p>
        </div>
      </Card>
    </div>
  );
}