Magic Link
Passwordless authentication with magic link email. Features 3D card flip animation on success, gradient shimmer effects, and animated success overlay.
Main Features of Magic Link
How to Use Magic Link in Next.js
Installation Guide for Magic Link
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | "Magic Link" | Title text displayed at the top of the form. |
subtitle | string | "Passwordless login." | Subtitle text displayed below the title. |
onSendLink | (email: string) => Promise<void> | undefined | Callback function called when magic link is sent. |
companyName | string | "Acme Inc." | Company name displayed in the logo area. |
showCompanyLogo | boolean | true | Whether to display the company logo. |
className | string | undefined | Additional CSS classes for custom styling. |
successTitle | string | "Check your email" | Title text displayed in the success overlay. |
successMessage | string | "Click the link in the email we just sent you." | Message text displayed in the success overlay. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is the 3D flip?
Upon successful email submission, the card smoothly flips 180 degrees using Framer Motion 3D transforms to reveal the success message.
QCan I add social logins?
While designed for email, the card layout is flexible enough to include 'Sign in with Google/GitHub' buttons below the main input.
QIs it mobile responsive?
The magic link card maintains its 3D aspect ratio and legibility on mobile, providing a high-end feel even on smaller screens.