# Verify Email 01 - Email Verification Page

> A clean email verification screen that confirms account activation, guides users to check their inbox, and offers resend functionality for a smooth onboarding experience.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/verify-email-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/verify-email-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/verify-email-01-light-59231585fbd268c2.png
- Registry item: https://shadcnspace.com/r/verify-email-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/verify-email-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `card`, `field`

## Files

### `src/components/shadcn-space/blocks/verify-email-01/page.tsx`

```tsx
import VerifyEmail from "@/components/shadcn-space/blocks/verify-email-01/verify-email";

const Page = () => {
  return <VerifyEmail />;
};

export default Page;
```

### `src/components/shadcn-space/blocks/verify-email-01/verify-email.tsx`

```tsx
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Field, FieldDescription, FieldGroup } from "@/components/ui/field";

const VerifyEmail = () => {
  return (
    <section className="bg-foreground dark:bg-background min-h-screen flex items-center relative">
      <div className="pointer-events-none absolute inset-0 right-0 overflow-hidden md:block hidden">
        {/* Outer big circle */}
        <div className="absolute left-1/1 top-0 h-650 w-650 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/10" />
        {/* Inner circle */}
        <div className="absolute left-1/1 top-0 h-175 w-175 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground dark:bg-background" />
      </div>
      <div className="py-10 md:py-20 max-w-lg px-4 sm:px-0 mx-auto w-full">
        <Card className="px-6 py-8 sm:p-12 relative">
          <CardHeader className="text-center gap-6 p-0">
            <div className="mx-auto">
              <a href="">
                <img
                  src="https://images.shadcnspace.com/assets/logo/logo-icon-black.svg"
                  alt="shadcnspace"
                  className="dark:hidden h-10 w-10"
                />
                <img
                  src="https://images.shadcnspace.com/assets/logo/logo-icon-white.svg"
                  alt="shadcnspace"
                  className="hidden dark:block h-10 w-10"
                />
              </a>
            </div>
            <div className="flex flex-col gap-1">
              <CardTitle className="text-2xl font-medium text-card-foreground">
                Verify your email
              </CardTitle>
              <CardDescription className="text-sm font-normal text-muted-foreground">
                An activation link has been sent to your email address:
                hello@example.com. Please check your inbox and click on the link
                to complete the activation process.
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <form>
              <FieldGroup>
                <Field className="gap-4">
                  <Button type="submit" size={"lg"} className="rounded-xl h-10 hover:bg-primary/80 cursor-pointer">
                    Verify Now
                  </Button>
                  <FieldDescription className="text-center text-sm font-normal text-muted-foreground">
                    Didn&apos;t get the email?{" "}
                    <a
                      href="#"
                      className="font-medium text-card-foreground no-underline!"
                    >
                      Resend
                    </a>
                  </FieldDescription>
                </Field>
              </FieldGroup>
            </form>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export default VerifyEmail;
```