New

LoginCard

Sleek login card with email/password, show/hide toggle, remember me, social auth icons, and forgot password link.

Auth & Onboardingloginauthsocialformpassword

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

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 { useState } from "react";
4import { Eye, EyeOff, Github, Chrome, Apple } from "lucide-react";
5
6export default function LoginCard() {
7  const [showPassword, setShowPassword] = useState(false);
8  const [email, setEmail] = useState("");
9  const [password, setPassword] = useState("");
10  const [remember, setRemember] = useState(false);
11
12  return (
13    <div className="mx-auto w-full max-w-md rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl dark:border-zinc-800 dark:bg-zinc-950">
14      <div className="mb-6 text-center">
15        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600 text-white font-bold text-lg">A</div>
16        <h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Welcome back</h2>
17        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Sign in to your account to continue</p>
18      </div>
19
20      <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
21        <div>
22          <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300">Email</label>
23          <input
24            id="email"
25            type="email"
26            placeholder="you@example.com"
27            value={email}
28            onChange={(e) => setEmail(e.target.value)}
29            className="w-full rounded-lg border border-zinc-300 bg-transparent px-3.5 py-2.5 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 dark:border-zinc-700 dark:text-zinc-100"
30          />
31        </div>
32
33        <div>
34          <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300">Password</label>
35          <div className="relative">
36            <input
37              id="password"
38              type={showPassword ? "text" : "password"}
39              placeholder="••••••••"
40              value={password}
41              onChange={(e) => setPassword(e.target.value)}
42              className="w-full rounded-lg border border-zinc-300 bg-transparent px-3.5 py-2.5 pr-10 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 dark:border-zinc-700 dark:text-zinc-100"
43            />
44            <button
45              type="button"
46              onClick={() => setShowPassword(!showPassword)}
47              className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
48              aria-label={showPassword ? "Hide password" : "Show password"}
49            >
50              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
51            </button>
52          </div>
53        </div>
54
55        <div className="flex items-center justify-between">
56          <label className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400">
57            <input
58              type="checkbox"
59              checked={remember}
60              onChange={(e) => setRemember(e.target.checked)}
61              className="h-4 w-4 rounded border-zinc-300 accent-violet-600"
62            />
63            Remember me
64          </label>
65          <button type="button" className="text-sm font-medium text-violet-600 hover:text-violet-500 dark:text-violet-400">
66            Forgot password?
67          </button>
68        </div>
69
70        <button
71          type="submit"
72          className="w-full rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md transition-all hover:from-violet-500 hover:to-indigo-500 hover:shadow-lg active:scale-[0.98]"
73        >
74          Sign in
75        </button>
76      </form>
77
78      <div className="my-6 flex items-center gap-3">
79        <div className="h-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
80        <span className="text-xs font-medium text-zinc-400">OR CONTINUE WITH</span>
81        <div className="h-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
82      </div>
83
84      <div className="grid grid-cols-3 gap-3">
85        <button className="flex items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 py-2.5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800">
86          <Github className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
87        </button>
88        <button className="flex items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 py-2.5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800">
89          <Chrome className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
90        </button>
91        <button className="flex items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 py-2.5 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:bg-zinc-800">
92          <Apple className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
93        </button>
94      </div>
95
96      <p className="mt-6 text-center text-sm text-zinc-500 dark:text-zinc-400">
97        Don&apos;t have an account?{" "}
98        <button className="font-semibold text-violet-600 hover:text-violet-500 dark:text-violet-400">Sign up</button>
99      </p>
100    </div>
101  );
102}