NewsletterSignup

Email signup section with input and success variant

Marketing & Landingnewsletteremailsignup

Dependencies

shadcn/ui components needed:

npx shadcn@latest add inputnpx shadcn@latest add buttonnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Card, CardContent } from '@/components/ui/card';
6import { CheckCircle2, Mail } from 'lucide-react';
7
8export default function NewsletterSignup() {
9  return (
10    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6 flex items-center">
11      <div className="container mx-auto max-w-2xl space-y-8">
12        {/* Signup Form */}
13        <Card className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50">
14          <CardContent className="p-8 md:p-12 text-center space-y-6">
15            <div className="w-16 h-16 mx-auto bg-gradient-to-br from-purple-500/20 to-indigo-500/20 rounded-2xl flex items-center justify-center">
16              <Mail className="h-8 w-8 text-purple-400" />
17            </div>
18            
19            <div>
20              <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">
21                Stay in the loop
22              </h2>
23              <p className="text-slate-400 text-lg">
24                Get the latest updates, tips, and resources delivered to your inbox.
25              </p>
26            </div>
27            
28            <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
29              <Input
30                type="email"
31                placeholder="Enter your email"
32                className="bg-slate-800/50 border-slate-600 text-white placeholder:text-slate-500 h-12"
33              />
34              <Button className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white h-12 px-6">
35                Subscribe
36              </Button>
37            </div>
38            
39            <p className="text-slate-500 text-sm">
40              We respect your privacy. Unsubscribe at any time.
41            </p>
42          </CardContent>
43        </Card>
44        
45        {/* Success State */}
46        <Card className="bg-gradient-to-br from-green-900/20 to-emerald-900/20 border-green-500/30">
47          <CardContent className="p-6 flex items-center gap-4">
48            <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
49              <CheckCircle2 className="h-6 w-6 text-green-400" />
50            </div>
51            <div>
52              <p className="text-green-400 font-semibold text-lg">
53                You\'re subscribed!
54              </p>
55              <p className="text-slate-400 text-sm">
56                Check your inbox for a confirmation email.
57              </p>
58            </div>
59          </CardContent>
60        </Card>
61      </div>
62    </div>
63  );
64}