Components
Loading preview...
Here is Login with listed provider component
npx shadcn@latest add https://21st.dev/r/float_ui/login-with-listed-provider"use client";
import React from "react";
export default function LoginPage() {
return (
<main className="w-full h-screen flex flex-col items-center justify-center px-4">
<div className="max-w-sm w-full text-gray-600 space-y-6">
{/* Logo + heading */}
<div className="text-center pb-6">
<img
src="https://floatui.com/logo.svg"
width={150}
alt="Logo"
className="mx-auto"
/>
<div className="mt-5">
<h3 className="text-gray-800 text-2xl font-bold sm:text-3xl">
Log in to your account
</h3>
</div>
</div>
{/* Form */}
<form onSubmit={(e) => e.preventDefault()} className="space-y-5">
<div>
<label className="font-medium">Email</label>
<input
type="email"
required
className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
<div>
<label className="font-medium">Password</label>
<input
type="password"
required
className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
{/* Remember me + Forgot password */}
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-x-2">
<input
type="checkbox"
id="remember-me-checkbox"
className="hidden peer"
/>
<label
htmlFor="remember-me-checkbox"
className="relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45"
></label>
<span>Remember me</span>
</div>
<a
href="#"
className="text-indigo-600 hover:text-indigo-500"
>
Forgot password?
</a>
</div>
<button
type="submit"
className="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
>
Sign in
</button>
</form>
{/* Divider */}
<div className="relative">
<span className="block w-full h-px bg-gray-300"></span>
<p className="inline-block w-fit text-sm bg-white px-2 absolute -top-2 inset-x-0 mx-auto">
Or continue with
</p>
</div>
{/* Google Button */}
<button className="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100">
<svg
className="w-5 h-5"
viewBox="0 0 533.5 544.3"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M533.5 278.4c0-17.4-1.6-34.1-4.6-50.2H272v95h146.9c-6.3 33.9-25 62.5-53.2 81.8v68.1h85.8c50.2-46.3 82-114.6 82-194.7z"
fill="#4285F4"
/>
<path
d="M272 544.3c71.6 0 131.7-23.7 175.7-64.2l-85.8-68.1c-23.8 16-54.1 25.4-89.9 25.4-69.1 0-127.6-46.6-148.4-109.3h-89.6v68.9C77.7 480.5 168.5 544.3 272 544.3z"
fill="#34A853"
/>
<path
d="M123.6 328.1c-10.8-32.1-10.8-66.9 0-99l-89.6-68.9c-39.1 77.6-39.1 168.3 0 245.9l89.6-68z"
fill="#FBBC05"
/>
<path
d="M272 107.7c37.4-.6 73.5 13.2 101.1 38.7l75.4-75.4C403.4 24.5 341.4 0 272 0 168.5 0 77.7 63.8 34 159.2l89.6 68.9C144.4 154.3 202.9 107.7 272 107.7z"
fill="#EA4335"
/>
</svg>
Continue with Google
</button>
{/* Signup link */}
<p className="text-center text-sm">
Don't have an account?{" "}
<a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
Sign up
</a>
</p>
</div>
</main>
);
}