Login Blocks for Shadcn and React
Simple login card
import { IconBrandGithub, IconBrandGoogleFilled } from '@tabler/icons-react'
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="items-center text-center">
<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">
<IconBrandGithub className="size-4" />
Github
</Button>
<Button variant="outline" className="w-full">
<IconBrandGoogleFilled className="size-4" />
Google
</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?
{' '}
<a href="#" className="font-semibold text-primary hover:underline">
Sign up
</a>
</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 |
| Tabler React | NPM |
Frequently asked questions
Are the login blocks free to use?
We offer both free and premium login blocks. The free blocks are completely free to use in personal and commercial projects. Premium blocks require a one-time purchase for access to more advanced designs.
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 & 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.