ShadCN Vaults

Back to Blocks

Signup Form

Auth Block

AuthComponent

Signup Form

Comprehensive user registration form with social signup, validation, and terms acceptance.

Preview

Full width desktop view

Code

auth-4.tsx
1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { Separator } from "@/components/ui/separator";
14import { Checkbox } from "@/components/ui/checkbox";
15import {
16  Eye,
17  EyeOff,
18  Mail,
19  Lock,
20  User,
21  Phone,
22  ArrowRight,
23  Github,
24  Chrome,
25} from "lucide-react";
26import { useState } from "react";
27
28export function LoginBlock4() {
29  const [showPassword, setShowPassword] = useState(false);
30  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
31  const [acceptTerms, setAcceptTerms] = useState(false);
32
33  return (
34    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 dark:from-background dark:to-muted/20 p-4">
35      <Card className="w-full max-w-lg border-2 shadow-2xl">
36        <CardHeader className="space-y-4 text-center">
37          <div className="mx-auto w-16 h-16 bg-gradient-to-br from-green-500 to-blue-500 rounded-full flex items-center justify-center">
38            <User className="h-8 w-8 text-white" />
39          </div>
40          <div className="space-y-2">
41            <CardTitle className="text-2xl font-bold">
42              Create Your Account
43            </CardTitle>
44            <CardDescription className="text-muted-foreground">
45              Join us today and start your journey
46            </CardDescription>
47          </div>
48        </CardHeader>
49
50        <CardContent className="space-y-6">
51          {/* Social Signup */}
52          <div className="space-y-3">
53            <Button variant="outline" className="w-full gap-3 h-11">
54              <Chrome className="h-4 w-4 text-blue-500" />
55              Sign up with Google
56            </Button>
57            <Button variant="outline" className="w-full gap-3 h-11">
58              <Github className="h-4 w-4" />
59              Sign up with GitHub
60            </Button>
61          </div>
62
63          <div className="relative">
64            <div className="absolute inset-0 flex items-center">
65              <Separator className="w-full" />
66            </div>
67            <div className="relative flex justify-center text-xs uppercase">
68              <span className="bg-background px-2 text-muted-foreground">
69                Or sign up with email
70              </span>
71            </div>
72          </div>
73
74          {/* Registration Form */}
75          <form className="space-y-4">
76            <div className="grid grid-cols-2 gap-4">
77              <div className="space-y-2">
78                <Label htmlFor="firstName">First Name</Label>
79                <div className="relative">
80                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
81                  <Input id="firstName" placeholder="John" className="pl-10" />
82                </div>
83              </div>
84              <div className="space-y-2">
85                <Label htmlFor="lastName">Last Name</Label>
86                <div className="relative">
87                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
88                  <Input id="lastName" placeholder="Doe" className="pl-10" />
89                </div>
90              </div>
91            </div>
92
93            <div className="space-y-2">
94              <Label htmlFor="email">Email Address</Label>
95              <div className="relative">
96                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
97                <Input
98                  id="email"
99                  type="email"
100                  placeholder="john@example.com"
101                  className="pl-10"
102                />
103              </div>
104            </div>
105
106            <div className="space-y-2">
107              <Label htmlFor="phone">Phone Number (Optional)</Label>
108              <div className="relative">
109                <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
110                <Input
111                  id="phone"
112                  type="tel"
113                  placeholder="+1 (555) 000-0000"
114                  className="pl-10"
115                />
116              </div>
117            </div>
118
119            <div className="space-y-2">
120              <Label htmlFor="password">Password</Label>
121              <div className="relative">
122                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
123                <Input
124                  id="password"
125                  type={showPassword ? "text" : "password"}
126                  placeholder="Create a strong password"
127                  className="pl-10 pr-10"
128                />
129                <Button
130                  type="button"
131                  variant="ghost"
132                  size="icon"
133                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
134                  onClick={() => setShowPassword(!showPassword)}
135                >
136                  {showPassword ? (
137                    <EyeOff className="h-4 w-4 text-muted-foreground" />
138                  ) : (
139                    <Eye className="h-4 w-4 text-muted-foreground" />
140                  )}
141                </Button>
142              </div>
143            </div>
144
145            <div className="space-y-2">
146              <Label htmlFor="confirmPassword">Confirm Password</Label>
147              <div className="relative">
148                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
149                <Input
150                  id="confirmPassword"
151                  type={showConfirmPassword ? "text" : "password"}
152                  placeholder="Confirm your password"
153                  className="pl-10 pr-10"
154                />
155                <Button
156                  type="button"
157                  variant="ghost"
158                  size="icon"
159                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
160                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
161                >
162                  {showConfirmPassword ? (
163                    <EyeOff className="h-4 w-4 text-muted-foreground" />
164                  ) : (
165                    <Eye className="h-4 w-4 text-muted-foreground" />
166                  )}
167                </Button>
168              </div>
169            </div>
170
171            <div className="space-y-4">
172              <div className="flex items-start space-x-2">
173                <Checkbox
174                  id="terms"
175                  checked={acceptTerms}
176                  onCheckedChange={() => {
177                    setAcceptTerms(!acceptTerms);
178                  }}
179                  className="mt-1"
180                />
181                <Label htmlFor="terms" className="text-sm leading-relaxed">
182                  I agree to the{" "}
183                  <Button variant="link" className="px-0 h-auto text-sm">
184                    Terms of Service
185                  </Button>{" "}
186                  and{" "}
187                  <Button variant="link" className="px-0 h-auto text-sm">
188                    Privacy Policy
189                  </Button>
190                </Label>
191              </div>
192
193              <div className="flex items-center space-x-2">
194                <Checkbox id="newsletter" />
195                <Label htmlFor="newsletter" className="text-sm">
196                  Send me product updates and marketing emails
197                </Label>
198              </div>
199            </div>
200
201            <Button
202              type="submit"
203              className="w-full gap-2 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
204              disabled={!acceptTerms}
205            >
206              Create Account
207              <ArrowRight className="h-4 w-4" />
208            </Button>
209          </form>
210
211          <div className="text-center text-sm text-muted-foreground">
212            Already have an account?{" "}
213            <Button variant="link" className="px-0 font-medium">
214              Sign in here
215            </Button>
216          </div>
217        </CardContent>
218      </Card>
219    </section>
220  );
221}

Dependencies

External Libraries

lucide-reactreact

Shadcn/UI Components

buttoncardcheckboxinputlabelseparator

LICENSE

MIT License

Copyright (c) 2025 Aldhaneka

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Shadcn Vaults Project (CC BY-NC 4.0 with Internal Use Exception)

All user-submitted components in the '/blocks' directory are licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0),
with the following clarification and exception:

You are free to:
- Share — copy and redistribute the material in any medium or format
- Adapt — remix, transform, and build upon the material

Under these conditions:
- Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
- NonCommercial — You may NOT use the material for commercial redistribution, resale, or monetization.

🚫 You MAY NOT:
- Sell or redistribute the components individually or as part of a product (e.g. a UI kit, template marketplace, SaaS component library)
- Offer the components or derivative works in any paid tool, theme pack, or design system

✅ You MAY:
- Use the components in internal company tools, dashboards, or applications that are not sold as products
- Remix or adapt components for private or enterprise projects
- Use them in open-source non-commercial projects

This license encourages sharing, learning, and internal innovation — but prohibits using these components as a basis for monetized products.

Full license text: https://creativecommons.org/licenses/by-nc/4.0/

By submitting a component, contributors agree to these terms.

For questions about licensing, please contact the project maintainers.