Split Signup
Split-screen signup form with animated left panel showcase and gradient backgrounds. Features rotating border animations and hover effects on the showcase card.
Main Features of Split Signup
How to Use Split Signup in Next.js
Installation Guide for Split Signup
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
theme | 'dark' | 'light' | undefined | Color theme for the component. |
accentColor | string | undefined | Custom accent color for the component. |
title | string | "Create Account" | Title text displayed at the top of the form. |
subtitle | string | "Start your 14-day free trial." | Subtitle text displayed below the title. |
showLogo | boolean | undefined | Whether to display the logo. |
onSubmit | (data: any) => Promise<void> | undefined | Callback function called when form is submitted. |
onSuccess | () => void | undefined | Callback function called on successful submission. |
onError | (err: string) => void | undefined | Callback function called on submission error. |
loading | boolean | undefined | Whether the form is in a loading state. |
className | string | undefined | Additional CSS classes for custom styling. |
showLeftPanel | boolean | true | Whether to display the left showcase panel. |
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
QCan I hide the left panel?
Yes, the `showLeftPanel` prop allows you to toggle the showcase off for a focused, single-column signup experience on specific routes.
QDoes it support social login?
The form layout is optimized for traditional email/password but can easily be extended with branded provider buttons.
QHow does the rotating border work?
The showcase container features a slow-moving gradient border that uses CSS Conic Gradients and Framer Motion for a subtle 'Glow' effect.