Login Blocks for Shadcn and React
Simple login card
import { Button } from '@/components/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import {
Field,
FieldContent,
FieldLabel,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
export default function LoginOne() {
return (
<section className="flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-lg pb-0">
<CardHeader className="flex flex-col gap-1 justify-start items-start text-start">
<CardTitle className="text-2xl">Welcome back</CardTitle>
<CardDescription>
Enter your credentials to access your account
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<FieldContent>
<Input
id="email"
placeholder="[email protected]"
type="email"
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
/>
</FieldContent>
</Field>
<Field>
<div className="flex items-center justify-between">
<FieldLabel htmlFor="password">Password</FieldLabel>
<a
href="#"
className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
>
Forgot password?
</a>
</div>
<FieldContent>
<Input id="password" type="password" />
</FieldContent>
</Field>
<Button className="w-full">
Sign in
</Button>
<div className="relative flex justify-center items-center w-full">
<div className="border-border absolute h-px w-full border-t" />
<span className="bg-card text-muted-foreground relative px-2 text-xs">
Or continue with
</span>
</div>
<div className="grid grid-cols-2 gap-4">
<Button variant="outline" className="w-full">
<svg viewBox="0 0 488 512" className="size-4">
<path
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
fill="currentColor"
/>
</svg>
Google
</Button>
<Button variant="outline" className="w-full">
<svg viewBox="0 0 496 512" className="size-4">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
fill="currentColor"
/>
</svg>
GitHub
</Button>
</div>
</CardContent>
<CardFooter className="justify-center bg-muted/50 [.border-t]:py-3 border-t">
<p className="text-sm text-muted-foreground">
Don't have an account?
<Button variant="link" size="sm" className="font-semibold">
Sign up
</Button>
</p>
</CardFooter>
</Card>
</section>
)
} Block details
A clean, centered login card with email/password authentication and social login options. Features a professional layout with clear hierarchy and premium styling.
| Dependency | Source |
|---|---|
| Button (shadcn) | Registry |
| Input (shadcn) | Registry |
| Card (shadcn) | Registry |
| Field (shadcn) | Registry |
Frequently asked questions
Are the login blocks free to use?
Yes. All our login blocks are free to use in personal and commercial projects.
How do I use these login blocks in my project?
Simply browse our collection, click on the "Copy Code" button for your chosen block, and paste it into your Shadcn React project. All components are built with Tailwind CSS and shadcn React, so they'll work seamlessly with your existing setup.
Can I customize the login blocks?
Absolutely! All our login blocks are fully customizable. You can easily modify colors, spacing, typography, and layout by adjusting the Tailwind CSS classes in the component code.