# Check Mail 2

> Check Mail 2 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-check-mail-2).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-check-mail-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-check-mail-2-light-4e053e3a00888d8d.png
- Registry item: https://uiable.com/r/block-check-mail-2.json
- Categories: check-mail
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-check-mail-2.json
```

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

## Dependencies

- npm packages: `framer-motion`, `lucide-react`
- Registry items: `@uiable/button`

## Files

### `src/components/uiable/blocks/check-mail/check-mail-2/check-mail-2.tsx`

```tsx
"use client"

import { useRef } from "react"

// next
import Link from "next/link"

// shadcn
import { Button } from "@/components/ui/button"

// third-party
import { motion, useMotionValue, useMotionTemplate } from "framer-motion"

// assets
import { MailCheck } from "lucide-react"

//  ------------------------------ | CHECK MAIL 2 | ------------------------------  //

export default function CheckMail2() {
  const formRef = useRef<HTMLDivElement>(null)
  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!formRef.current) return
    const { left, top } = formRef.current.getBoundingClientRect()
    mouseX.set(e.clientX - left)
    mouseY.set(e.clientY - top)
  }

  return (
    <div
      className="dark relative z-20 flex min-h-screen w-full items-center justify-center overflow-hidden bg-slate-950 p-4 text-white md:p-8"
      onMouseMove={handleMouseMove}
      ref={formRef}
    >
      <motion.div
        initial={{ opacity: 0, y: 30, scale: 0.95 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        transition={{
          duration: 0.6,
          type: "spring",
          stiffness: 100,
          damping: 20,
        }}
        className="relative z-10 flex w-full max-w-[440px] flex-col items-center overflow-hidden rounded-[2.5rem] border border-white/10 bg-[#0B0F19]/80 p-8 text-center shadow-2xl backdrop-blur-xl md:p-10"
      >
        <motion.div
          className="pointer-events-none absolute inset-0 opacity-50"
          style={{
            background: useMotionTemplate`
              radial-gradient(
                300px circle at ${mouseX}px ${mouseY}px,
                rgba(56, 189, 248, 0.15),
                transparent 80%
              )
            `,
          }}
        />

        <div className="relative z-10 mb-6 flex h-16 w-16 items-center justify-center rounded-2xl border border-cyan-500/20 bg-cyan-500/10">
          <MailCheck className="h-8 w-8 text-cyan-400" />
        </div>

        <div className="relative z-10 mb-8 text-center">
          <h1 className="mt-2 text-3xl font-extrabold tracking-tight text-white">
            Check your email
          </h1>
          <p className="mx-auto mt-2 max-w-[280px] text-sm font-medium text-gray-400">
            We've sent a temporary login link. Please check your inbox and click
            the link to continue.
          </p>
        </div>

        <div className="relative z-10 w-full">
          <Link href="#" className="w-full">
            <Button className="w-full rounded-full bg-cyan-600 py-6 text-base font-bold text-white transition-all hover:scale-[1.02] hover:bg-cyan-500 active:scale-[0.98]">
              Back to Login
            </Button>
          </Link>
        </div>

        <div className="relative z-10 mt-6 text-center">
          <p className="text-xs font-semibold text-gray-400">
            Didn't receive the email?{" "}
            <button className="text-cyan-400 transition-colors hover:text-cyan-300">
              Click to resend
            </button>
          </p>
        </div>
      </motion.div>
    </div>
  )
}
```