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.
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. |
When to Use
Excellent for marketing-heavy landing pages, enterprise SaaS, and Next.js sites that want a high-impact 'Split Screen' aesthetic. Use this React component for a signup experience with a dedicated marketing showcase panel and clean form layout.
Best Practices
Maintain consistent spacing within your design system by using high-resolution assets in the left panel. Follow React best practices by managed the multi-field form state. Optimize for performance by lazy-loading the showcase imagery.
Why This Component Matters
Split-screen layouts combine utility with brand storytelling. This production-ready UI component helpsคุณ build an interface that feels energetic and professional, summarizing your value proposition alongside the registration form.
FAQ
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.
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.