Premium Forms

Floating labels, multi-step flows, glassmorphism inputs, and fully animated form experiences.

components

Welcome back

Remember me

Don't have an account?

Email & password login with eye toggle and remember me

1	const [show, setShow] = useState(false);
2	return (
3	<div "color:#79c0ff">className="rounded-xl border border-slate-700 bg-slate-800 p-6">
4	<h3 "color:#79c0ff">className="text-sm font-bold text-white">Welcome back</h3>
5	<div "color:#79c0ff">className="mt-4 space-y-3">
6	<div "color:#79c0ff">className="relative">
7	<input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email"
8	"color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 py-2.5 pl-9 pr-4 text-sm text-white outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20" />
9	</div>
10	<div "color:#79c0ff">className="relative">
11	<input "color:#79c0ff">type={show ? "text" : "password"} "color:#79c0ff">placeholder="Password"
12	"color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 py-2.5 pl-9 pr-10 text-sm text-white outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20" />
13	<button "color:#79c0ff">onClick={() => setShow(!show)}
14	"color:#79c0ff">className="absolute inset-y-0 right-3 flex items-center text-slate-500 hover:text-violet-400">
15	{/* Eye icon */}
16	</button>
17	</div>
18	<button "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-semibold text-white">
19	Sign In
20	</button>
21	</div>
22	</div>
23	);

⬡ UIDrop Component23 lines

TypeScript ReactUTF-8

Create account

Join thousands of developers

Sign-up form with live password strength indicator

1	const [password, setPassword] = useState("");
2	const strength = password.length < 6 ? 1 : password.length < 10 ? 2 : /[A-Z]/.test(password) && /[0-9]/.test(password) ? 4 : 3;
3	return (
4	<div "color:#79c0ff">className="space-y-3">
5	<div "color:#79c0ff">className="grid grid-cols-2 gap-2">
6	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="First name" "color:#79c0ff">className="rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
7	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Last name" "color:#79c0ff">className="rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
8	</div>
9	<input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
10	<input "color:#79c0ff">value={password} "color:#79c0ff">onChange={e => setPassword(e.target.value)} "color:#79c0ff">type="password" "color:#79c0ff">placeholder="Password" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
11	<div "color:#79c0ff">className="flex gap-1">
12	{[1,2,3,4].map(i => <div "color:#79c0ff">key={i} "color:#79c0ff">className={`h-1 flex-1 rounded-full ${i <= strength ? "bg-emerald-400" : "bg-slate-700"}`} />)}
13	</div>
14	</div>
15	);

⬡ UIDrop Component15 lines

TypeScript ReactUTF-8

Forgot Password

Forgot password?

We'll send a reset link to your email

Reset link flow with success state transition

forgot-password.tsx

1	const [sent, setSent] = useState(false);
2	return !sent ? (
3	<div "color:#79c0ff">className="space-y-3">
4	<input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Enter your email"
5	"color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
6	<button "color:#79c0ff">onClick={() => setSent(true)}
7	"color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-semibold text-white">
8	Send Reset Link
9	</button>
10	</div>
11	) : (
12	<div "color:#79c0ff">className="text-center py-4">
13	<p "color:#79c0ff">className="text-sm font-bold text-emerald-400">Check your email!</p>
14	</div>
15	);

⬡ UIDrop Component15 lines

TypeScript ReactUTF-8

Get in touch

We reply within 24 hours

Full contact form with submit success feedback

contact-us.tsx

1	<form "color:#79c0ff">className="space-y-3">
2	<div "color:#79c0ff">className="grid grid-cols-2 gap-2">
3	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Name" "color:#79c0ff">className="rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-cyan-500" />
4	<input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email" "color:#79c0ff">className="rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-cyan-500" />
5	</div>
6	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Subject" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-cyan-500" />
7	<textarea rows={3} "color:#79c0ff">placeholder="Your message..." "color:#79c0ff">className="w-full resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-cyan-500" />
8	<button "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 py-2.5 text-sm font-semibold text-white">
9	Send Message
10	</button>
11	</form>

⬡ UIDrop Component11 lines

TypeScript ReactUTF-8

Support Ticket

Avg response: 2 hours

Priority-select support form with vivid orange accent

support-ticket.tsx

1	<form "color:#79c0ff">className="space-y-3">
2	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Issue title" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-orange-500" />
3	<select "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-slate-400 outline-none focus:border-orange-500">
4	<option>Low</option><option>Medium</option><option>High</option><option>Critical</option>
5	</select>
6	<textarea rows={3} "color:#79c0ff">placeholder="Describe your issue..." "color:#79c0ff">className="w-full resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-orange-500" />
7	<button "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-orange-500 to-red-500 py-2.5 text-sm font-semibold text-white">
8	Submit Ticket
9	</button>
10	</form>

⬡ UIDrop Component10 lines

TypeScript ReactUTF-8

Feedback Form

Share your feedback

How was your experience?

Star rating widget with interactive hover and text area

feedback-form.tsx

1	const [rating, setRating] = useState(0);
2	return (
3	<div>
4	<div "color:#79c0ff">className="flex justify-center gap-2">
5	{[1,2,3,4,5].map(star => (
6	<button "color:#79c0ff">key={star} "color:#79c0ff">onClick={() => setRating(star)}
7	"color:#79c0ff">className={`text-2xl ${star <= rating ? "text-amber-400" : "text-slate-700"}`}>★</button>
8	))}
9	</div>
10	<textarea rows={3} "color:#79c0ff">placeholder="Tell us what you think..."
11	"color:#79c0ff">className="mt-3 w-full resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-amber-500" />
12	<button "color:#79c0ff">className="mt-2 w-full rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 py-2.5 text-sm font-semibold text-white">
13	Submit Feedback
14	</button>
15	</div>
16	);

⬡ UIDrop Component16 lines

TypeScript ReactUTF-8

Email Newsletter

Stay in the loop

Join 12,000+ subscribers. No spam ever.

Inline subscribe input with pink-rose gradient CTA

email-newsletter.tsx

1	const [email, setEmail] = useState("");
2	return (
3	<div "color:#79c0ff">className="flex gap-2">
4	<input "color:#79c0ff">value={email} "color:#79c0ff">onChange={e => setEmail(e.target.value)} "color:#79c0ff">type="email" "color:#79c0ff">placeholder="your@email.com"
5	"color:#79c0ff">className="flex-1 rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20" />
6	<button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-pink-500 to-rose-600 px-4 py-2.5 text-sm font-semibold text-white">
7	Subscribe
8	</button>
9	</div>
10	);

⬡ UIDrop Component10 lines

TypeScript ReactUTF-8

Waitlist Signup

Early Access

Join the waitlist

Be first to know when we launch

Early-access waitlist with position confirmation

waitlist-signup.tsx

1	const [submitted, setSubmitted] = useState(false);
2	return !submitted ? (
3	<div "color:#79c0ff">className="space-y-2">
4	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Full name" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
5	<input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="Email address" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
6	<button "color:#79c0ff">onClick={() => setSubmitted(true)} "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-purple-600 py-2.5 text-sm font-semibold text-white">
7	Request Access
8	</button>
9	</div>
10	) : (
11	<p "color:#79c0ff">className="text-center text-sm font-semibold text-emerald-400">You're on the list! Position #2,847</p>
12	);

⬡ UIDrop Component12 lines

TypeScript ReactUTF-8

Premium Subscribe

✦ Premium

Upgrade to Pro

Unlock all components & templates

All 200+ components

Source code access

Priority support

Lifetime updates

₹69₹99993% OFF

Pricing card with feature list and lifetime offer badge

premium-subscribe.tsx

1	<div "color:#79c0ff">className="relative overflow-hidden rounded-xl border border-violet-500/20 bg-gradient-to-br from-violet-950/60 to-slate-900 p-6">
2	<span "color:#79c0ff">className="rounded-full border border-violet-400/30 bg-violet-500/10 px-2.5 py-1 text-[10px] font-bold uppercase text-violet-300">✦ Premium</span>
3	<h3 "color:#79c0ff">className="mt-2 text-base font-bold text-white">Upgrade to Pro</h3>
4	<div "color:#79c0ff">className="my-4 space-y-1.5">
5	{["All 200+ components","Source code access","Priority support","Lifetime updates"].map(f => (
6	<div "color:#79c0ff">key={f} "color:#79c0ff">className="flex items-center gap-2">
7	<svg "color:#79c0ff">className="h-3.5 w-3.5 text-violet-400" ...><path d="M5 13l4 4L19 7" /></svg>
8	<span "color:#79c0ff">className="text-xs text-slate-300">{f}</span>
9	</div>
10	))}
11	</div>
12	<button "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-bold text-white">
13	Get {accessLabel} - {price}
14	</button>
15	</div>

⬡ UIDrop Component15 lines

TypeScript ReactUTF-8

Search with Suggestions

Live dropdown suggestions as you type

search-with-suggestions.tsx

1	const [query, setQuery] = useState("");
2	const suggestions = ["React hooks", "Tailwind CSS", "Next.js routing"];
3	const filtered = query ? suggestions.filter(s => s.toLowerCase().includes(query.toLowerCase())) : [];
4	return (
5	<div "color:#79c0ff">className="relative">
6	<input "color:#79c0ff">value={query} "color:#79c0ff">onChange={e => setQuery(e.target.value)} "color:#79c0ff">placeholder="Search..."
7	"color:#79c0ff">className="w-full rounded-xl border border-slate-700 bg-slate-800 py-2.5 pl-10 pr-4 text-sm text-white outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20" />
8	{filtered.length > 0 && (
9	<div "color:#79c0ff">className="absolute mt-1 w-full rounded-xl border border-slate-700 bg-slate-800 shadow-xl">
10	{filtered.map((s, i) => <button "color:#79c0ff">key={i} "color:#79c0ff">className="block w-full px-4 py-2.5 text-sm text-left text-slate-300 hover:bg-violet-500/10">{s}</button>)}
11	</div>
12	)}
13	</div>
14	);

⬡ UIDrop Component14 lines

TypeScript ReactUTF-8

Command Palette

ESC

Keyboard-shortcut command launcher with filter

command-palette.tsx

1	const [query, setQuery] = useState("");
2	const commands = [{ icon: "⚡", label: "New Project", shortcut: "⌘N" }, { icon: "⚙️", label: "Settings", shortcut: "⌘," }];
3	return (
4	<div "color:#79c0ff">className="rounded-xl border border-slate-600 bg-slate-900 shadow-2xl">
5	<div "color:#79c0ff">className="flex items-center gap-2 border-b border-slate-700 px-3 py-3">
6	<input "color:#79c0ff">value={query} "color:#79c0ff">onChange={e => setQuery(e.target.value)} "color:#79c0ff">placeholder="Type a command..."
7	"color:#79c0ff">className="flex-1 bg-transparent text-sm text-white placeholder-slate-500 outline-none" />
8	<kbd "color:#79c0ff">className="rounded border border-slate-700 bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-500">ESC</kbd>
9	</div>
10	{commands.map(cmd => (
11	<button "color:#79c0ff">key={cmd.label} "color:#79c0ff">className="flex w-full items-center justify-between px-3.5 py-2 hover:bg-violet-500/10">
12	<span "color:#79c0ff">className="text-sm text-slate-300">{cmd.icon} {cmd.label}</span>
13	<kbd "color:#79c0ff">className="text-[10px] text-slate-500">{cmd.shortcut}</kbd>
14	</button>
15	))}
16	</div>
17	);

⬡ UIDrop Component17 lines

TypeScript ReactUTF-8

Filter Bar

1 filter active

Tag-based filter bar with active indicator and count

filter-bar.tsx

1	const [active, setActive] = useState(["React"]);
2	const tags = ["React", "Vue", "Angular", "Svelte", "Next.js"];
3	const toggle = (t) => setActive(p => p.includes(t) ? p.filter(x => x !== t) : [...p, t]);
4	return (
5	<div>
6	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Filter..."
7	"color:#79c0ff">className="mb-3 w-full rounded-lg border border-slate-700 bg-slate-800 py-2 pl-8 pr-3 text-sm text-white outline-none focus:border-violet-500" />
8	<div "color:#79c0ff">className="flex flex-wrap gap-1.5">
9	{tags.map(t => (
10	<button "color:#79c0ff">key={t} "color:#79c0ff">onClick={() => toggle(t)}
11	"color:#79c0ff">className={`rounded-full px-3 py-1 text-xs font-medium ${active.includes(t) ? "bg-violet-500/20 text-violet-300 ring-1 ring-violet-500/40" : "bg-slate-800 text-slate-400"}`}>
12	{t}
13	</button>
14	))}
15	</div>
16	</div>
17	);

⬡ UIDrop Component17 lines

TypeScript ReactUTF-8

Floating Label Inputs

Floating Labels

Full Name

Email Address

Company

CSS peer-based animated floating labels

floating-label-inputs.tsx

1	<div "color:#79c0ff">className="relative">
2	<input "color:#79c0ff">id="email" "color:#79c0ff">type="email" "color:#79c0ff">placeholder=" "
3	"color:#79c0ff">className="peer w-full rounded-lg border border-slate-700 bg-slate-800 px-3 pb-2 pt-5 text-sm text-white outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20" />
4	<label "color:#79c0ff">htmlFor="email"
5	"color:#79c0ff">className="pointer-events-none absolute left-3 top-3.5 text-sm text-slate-500 transition-all peer-focus:top-1.5 peer-focus:text-[10px] peer-focus:font-semibold peer-focus:uppercase peer-focus:text-violet-400 peer-not-placeholder-shown:top-1.5 peer-not-placeholder-shown:text-[10px]">
6	Email Address
7	</label>
8	</div>

⬡ UIDrop Component8 lines

TypeScript ReactUTF-8

OTP Input

Verify your phone

Enter the 6-digit code sent to +91 ••••••1234

Didn't receive it?

6-digit OTP with auto-focus and backspace navigation

otp-input.tsx

1	const [otp, setOtp] = useState(["", "", "", "", "", ""]);
2	return (
3	<div "color:#79c0ff">className="flex justify-center gap-2">
4	{otp.map((digit, i) => (
5	<input "color:#79c0ff">key={i} "color:#79c0ff">value={digit} maxLength={1}
6	"color:#79c0ff">onChange={e => { const next = [...otp]; next[i] = e.target.value; setOtp(next); }}
7	"color:#79c0ff">className={`h-11 w-9 rounded-lg border bg-slate-800 text-center text-lg font-bold text-white outline-none focus:ring-2 ${digit ? "border-emerald-500 focus:ring-emerald-500/20" : "border-slate-700 focus:border-violet-500 focus:ring-violet-500/20"}`}
8	/>
9	))}
10	</div>
11	);

⬡ UIDrop Component11 lines

TypeScript ReactUTF-8

Custom Dropdown

Styled select with badge labels and chevron animation

custom-dropdown.tsx

1	const [open, setOpen] = useState(false);
2	const [selected, setSelected] = useState("Select a plan");
3	const options = ["Starter — Free", "Pro — $9/mo", "Team — $29/mo", "Enterprise"];
4	return (
5	<div "color:#79c0ff">className="relative">
6	<button "color:#79c0ff">onClick={() => setOpen(!open)}
7	"color:#79c0ff">className="flex w-full items-center justify-between rounded-xl border border-slate-700 bg-slate-800 px-4 py-3 text-sm text-white">
8	{selected}
9	<svg "color:#79c0ff">className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`} .../>
10	</button>
11	{open && (
12	<div "color:#79c0ff">className="absolute mt-1 w-full rounded-xl border border-slate-700 bg-slate-800 shadow-2xl">
13	{options.map(opt => (
14	<button "color:#79c0ff">key={opt} "color:#79c0ff">onClick={() => { setSelected(opt); setOpen(false); }}
15	"color:#79c0ff">className="block w-full px-4 py-2.5 text-left text-sm text-white hover:bg-violet-500/10">{opt}</button>
16	))}
17	</div>
18	)}
19	</div>
20	);

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

Multi-Select Tags

ReactTailwind

Tag-based multi-select with add/remove controls

multi-select-tags.tsx

1	const [selected, setSelected] = useState(["React"]);
2	const options = ["React", "Vue", "TypeScript", "Tailwind", "Node.js"];
3	const toggle = (tag) => setSelected(s => s.includes(tag) ? s.filter(t => t !== tag) : [...s, tag]);
4	return (
5	<div>
6	<div "color:#79c0ff">className="flex flex-wrap gap-1.5 rounded-xl border border-slate-700 bg-slate-800 p-2 min-h-10">
7	{selected.map(tag => (
8	<span "color:#79c0ff">key={tag} "color:#79c0ff">className="flex items-center gap-1 rounded-lg bg-violet-500/20 px-2.5 py-1 text-xs text-violet-300 ring-1 ring-violet-500/30">
9	{tag} <button "color:#79c0ff">onClick={() => toggle(tag)}>×</button>
10	</span>
11	))}
12	</div>
13	<div "color:#79c0ff">className="mt-2 flex flex-wrap gap-1.5">
14	{options.filter(o => !selected.includes(o)).map(tag => (
15	<button "color:#79c0ff">key={tag} "color:#79c0ff">onClick={() => toggle(tag)} "color:#79c0ff">className="rounded-lg border border-slate-700 bg-slate-800 px-2.5 py-1 text-xs text-slate-400 hover:text-violet-300">
16	+ {tag}
17	</button>
18	))}
19	</div>
20	</div>
21	);

⬡ UIDrop Component21 lines

TypeScript ReactUTF-8

Country Picker

Flag + dial-code picker paired with phone input

country-picker.tsx

1	const [selected, setSelected] = useState({ flag: "🇮🇳", name: "India", code: "+91" });
2	const countries = [
3	{ flag: "🇺🇸", name: "United States", code: "+1" },
4	{ flag: "🇬🇧", name: "United Kingdom", code: "+44" },
5	{ flag: "🇮🇳", name: "India", code: "+91" },
6	];
7	return (
8	<div "color:#79c0ff">className="flex gap-2">
9	<button "color:#79c0ff">className="flex items-center gap-2 rounded-xl border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white">
10	{selected.flag} {selected.code}
11	</button>
12	<input "color:#79c0ff">type="tel" "color:#79c0ff">placeholder="Phone number"
13	"color:#79c0ff">className="flex-1 rounded-xl border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
14	</div>
15	);

⬡ UIDrop Component15 lines

TypeScript ReactUTF-8

2-Step Onboarding

Step 1 of 2

Personal info

Step indicator with back/continue navigation

2-step-onboarding.tsx

1	const [step, setStep] = useState(1);
2	return (
3	<div>
4	<div "color:#79c0ff">className="mb-5 flex items-center gap-2">
5	{[1, 2].map(s => (
6	<div "color:#79c0ff">key={s} "color:#79c0ff">className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold ${step >= s ? "bg-gradient-to-br from-violet-600 to-indigo-600 text-white" : "border border-slate-700 text-slate-500"}`}>
7	{step > s ? "✓" : s}
8	</div>
9	))}
10	</div>
11	{step === 1 ? (
12	<div "color:#79c0ff">className="space-y-3">
13	<input "color:#79c0ff">type="text" "color:#79c0ff">placeholder="Display name" "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-white outline-none focus:border-violet-500" />
14	<button "color:#79c0ff">onClick={() => setStep(2)} "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-semibold text-white">Continue</button>
15	</div>
16	) : (
17	<div "color:#79c0ff">className="space-y-3">
18	<select "color:#79c0ff">className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2.5 text-sm text-slate-400 outline-none">
19	<option>Select your role</option>
20	</select>
21	<button "color:#79c0ff">className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-semibold text-white">Finish</button>
22	</div>
23	)}
24	</div>
25	);

⬡ UIDrop Component25 lines

TypeScript ReactUTF-8

Glowing Newsletter Form

Stay in the loop

Get weekly insights. No spam, unsubscribe anytime.

2,400+ designers & devs subscribed

A beautiful subscribe form with a gradient border glow, avatar stack social proof, and animated submit button.

glowing-newsletter-form.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-gradient-to-b from-slate-800 to-slate-900 p-6 shadow-xl">
2	<div "color:#79c0ff">className="mb-4 text-center">
3	<p "color:#79c0ff">className="text-lg font-extrabold text-white">Stay in the loop</p>
4	<p "color:#79c0ff">className="mt-1 text-sm text-slate-400">Get weekly insights. No spam, unsubscribe anytime.</p>
5	</div>
6	<div "color:#79c0ff">className="flex gap-2">
7	<div "color:#79c0ff">className="relative flex-1">
8	<input
9	"color:#79c0ff">type="email"
10	"color:#79c0ff">placeholder="you@example.com"
11	"color:#79c0ff">className="w-full rounded-xl border border-slate-600 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 transition"
12	/>
13	</div>
14	<button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30 hover:from-violet-500 hover:to-indigo-500 transition shrink-0">
15	Subscribe
16	</button>
17	</div>
18	<div "color:#79c0ff">className="mt-4 flex items-center gap-3">
19	<div "color:#79c0ff">className="flex -space-x-2">
20	{["from-violet-400 to-purple-500","from-cyan-400 to-blue-500","from-pink-400 to-rose-500","from-amber-400 to-orange-500"].map((g,i)=>(
21	<div "color:#79c0ff">key={i} "color:#79c0ff">className={`h-7 w-7 rounded-full bg-gradient-to-br ${g} ring-2 ring-slate-900`} />
22	))}
23	</div>
24	<p "color:#79c0ff">className="text-xs text-slate-400"><span "color:#79c0ff">className="font-semibold text-white">2,400+</span> designers & devs subscribed</p>
25	</div>
26	</div>

⬡ UIDrop Component26 lines

TypeScript ReactUTF-8