Back to components
Domain Verify Card React component

What is this?

A white custom-domain tile: the hostname, a status pill, and one DNS record row with type, host, and value. While verifying, an amber light scans under the record and the pill spins; then the pill turns into a green “Verified” check, the record gets its own check, and the line underneath reads “SSL certificate issued”. It holds on Verified under reduced motion. Swap the domain and record, then drop it into hosting, email, or onboarding settings.

Component

Domain Verify Card

A white custom-domain tile: the hostname, a status pill, and one DNS record row with type, host, and value. While verifying, an amber light scans under the record and the pill spins; then the pill turns into a green “Verified” check, the record gets its own check, and the line underneath reads “SSL certificate issued”. It holds on Verified under reduced motion. Swap the domain and record, then drop it into hosting, email, or onboarding settings.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0