AurenzaUI
Back to Component Explorer

Split Sign Up

signup

Dark stats panel on left, sign up form on right.

#signup#split#stats#layout
Live Interactive Preview

Create account

Join thousands of developers for free

or

Already have an account? Sign in

Component Source Code

Select language in the dropdown
SplitSignUp.tsx
1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, User, ArrowRight, Eye, EyeOff } from 'lucide-react';
4import { FaGoogle, FaGithub } from 'react-icons/fa6';
5
6export default function SplitSignUp() {
7  const [showPass, setShowPass] = useState(false);
8  const [loading, setLoading] = useState(false);
9  const submit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
10  const stats = [{ num: '10K+', label: 'Developers' }, { num: '50+', label: 'Components' }, { num: '100%', label: 'Free' }];
11  return (
12    <div className="w-full max-w-3xl overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-xl grid grid-cols-1 md:grid-cols-2">
13      {/* Left */}
14      <div className="hidden md:flex flex-col justify-between bg-zinc-950 p-10 text-white">
15        <div>
16          <div className="text-xl font-black mb-8">Aurenza<span className="text-blue-400">UI</span></div>
17          <h3 className="text-2xl font-extrabold leading-tight mb-3">Build stunning UIs with zero effort</h3>
18          <p className="text-sm text-zinc-400 leading-relaxed">Copy, paste, and customize. No dependencies, no lock-in, just clean code you own completely.</p>
19        </div>
20        <div className="grid grid-cols-3 gap-4 border-t border-zinc-800 pt-6">
21          {stats.map((s) => (
22            <div key={s.label}>
23              <div className="text-xl font-extrabold text-blue-400">{s.num}</div>
24              <div className="text-xs text-zinc-500 mt-0.5">{s.label}</div>
25            </div>
26          ))}
27        </div>
28      </div>
29
30      {/* Right */}
31      <div className="flex flex-col justify-center bg-white dark:bg-zinc-900 p-8">
32        <div className="mb-5">
33          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Create account</h2>
34          <p className="text-xs text-zinc-500 mt-1">Join thousands of developers for free</p>
35        </div>
36        <div className="grid grid-cols-2 gap-2 mb-4">
37          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
38            <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
39          </button>
40          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
41            <FaGithub className="h-3.5 w-3.5" /> GitHub
42          </button>
43        </div>
44        <div className="relative mb-4">
45          <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
46          <span className="relative mx-auto block w-fit bg-white dark:bg-zinc-900 px-3 text-[10px] uppercase tracking-wider text-zinc-400">or</span>
47        </div>
48        <form onSubmit={submit} className="space-y-3">
49          <div className="relative">
50            <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
51            <input type="text" required placeholder="Full name" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
52          </div>
53          <div className="relative">
54            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
55            <input type="email" required placeholder="Email address" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
56          </div>
57          <div className="relative">
58            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
59            <input type={showPass ? 'text' : 'password'} required placeholder="Password" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-10 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
60            <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
61              {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
62            </button>
63          </div>
64          <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
65            {loading ? 'Creating...' : <><span>Create Free Account</span><ArrowRight className="h-4 w-4" /></>}
66          </button>
67        </form>
68        <p className="mt-4 text-xs text-zinc-500">Already have an account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign in</a></p>
69      </div>
70    </div>
71  );
72}
73`,
74    jsxSourceCode: `'use client';
75import React, { useState } from 'react';
76import { Mail, Lock, User, ArrowRight, Eye, EyeOff } from 'lucide-react';
77import { FaGoogle, FaGithub } from 'react-icons/fa6';
78
79export default function SplitSignUp() {
80  const [showPass, setShowPass] = useState(false);
81  const [loading, setLoading] = useState(false);
82  const submit = (e) => { e.preventDefault(); setLoading(true); setTimeout(() => setLoading(false), 1500); };
83  const stats = [{ num: '10K+', label: 'Developers' }, { num: '50+', label: 'Components' }, { num: '100%', label: 'Free' }];
84  return (
85    <div className="w-full max-w-3xl overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-xl grid grid-cols-1 md:grid-cols-2">
86      {/* Left */}
87      <div className="hidden md:flex flex-col justify-between bg-zinc-950 p-10 text-white">
88        <div>
89          <div className="text-xl font-black mb-8">Aurenza<span className="text-blue-400">UI</span></div>
90          <h3 className="text-2xl font-extrabold leading-tight mb-3">Build stunning UIs with zero effort</h3>
91          <p className="text-sm text-zinc-400 leading-relaxed">Copy, paste, and customize. No dependencies, no lock-in, just clean code you own completely.</p>
92        </div>
93        <div className="grid grid-cols-3 gap-4 border-t border-zinc-800 pt-6">
94          {stats.map((s) => (
95            <div key={s.label}>
96              <div className="text-xl font-extrabold text-blue-400">{s.num}</div>
97              <div className="text-xs text-zinc-500 mt-0.5">{s.label}</div>
98            </div>
99          ))}
100        </div>
101      </div>
102
103      {/* Right */}
104      <div className="flex flex-col justify-center bg-white dark:bg-zinc-900 p-8">
105        <div className="mb-5">
106          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Create account</h2>
107          <p className="text-xs text-zinc-500 mt-1">Join thousands of developers for free</p>
108        </div>
109        <div className="grid grid-cols-2 gap-2 mb-4">
110          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
111            <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
112          </button>
113          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
114            <FaGithub className="h-3.5 w-3.5" /> GitHub
115          </button>
116        </div>
117        <div className="relative mb-4">
118          <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
119          <span className="relative mx-auto block w-fit bg-white dark:bg-zinc-900 px-3 text-[10px] uppercase tracking-wider text-zinc-400">or</span>
120        </div>
121        <form onSubmit={submit} className="space-y-3">
122          <div className="relative">
123            <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
124            <input type="text" required placeholder="Full name" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
125          </div>
126          <div className="relative">
127            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
128            <input type="email" required placeholder="Email address" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
129          </div>
130          <div className="relative">
131            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
132            <input type={showPass ? 'text' : 'password'} required placeholder="Password" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-10 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
133            <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
134              {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
135            </button>
136          </div>
137          <button type="submit" disabled={loading} className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition disabled:opacity-60">
138            {loading ? 'Creating...' : <><span>Create Free Account</span><ArrowRight className="h-4 w-4" /></>}
139          </button>
140        </form>
141        <p className="mt-4 text-xs text-zinc-500">Already have an account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign in</a></p>
142      </div>
143    </div>
144  );
145}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup
Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal
npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/signup/SplitSignUp.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx
1import SplitSignUp from '@/components/signup/SplitSignUp';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <SplitSignUp />
7    </main>
8  );
9}