Authentication Blocks based on shadcn/ui
Login and signup are screens every app needs and nobody enjoys building twice. These shadcn/ui authentication blocks give you the full set ready to wire up: sign-in, register, forgot-password, and the social-login buttons, with the labels, validation states, and spacing already handled.
They are built on shadcn/ui form fields and Tailwind, so the inputs, focus states, and error messages look right and behave accessibly. Copy the code or install it with one npx shadcn add command, then connect it to whatever you use for real auth: NextAuth, Clerk, Supabase, Firebase, or your own API.
One thing worth being clear about: these are the UI, not the backend. They give you the form and the flow; you plug in the provider that checks the password. Pick the layout below that fits, a centered card, a split screen with an image, and start from there.
A clean and minimal sign-in form featuring email and password fields with password visibility toggle, forgot password link, and Google sign-in option. Built with shadcn/ui components for a modern, accessible authentication experience. Perfect for simple login pages and user authentication flows.
import Authentication01 from "@/components/creative-tim/blocks/authentication-01"
export default function Page() {
return <Authentication01 />
}
A split-screen sign-in layout with form on the left and decorative image on the right. Features terms agreement checkbox, newsletter subscription option, and multiple social authentication buttons (Google, X/Twitter). Built with shadcn/ui for a professional, conversion-optimized login experience.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRO
import Authentication02 from "@/components/creative-tim/blocks/authentication-02"
export default function Page() {
return <Authentication02 />
}
A streamlined registration form with email input, terms agreement checkbox, and social sign-up options separated by a visual divider. Includes Google and X/Twitter authentication buttons. Built with shadcn/ui components for a modern, user-friendly sign-up experience.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROimport Authentication03 from "@/components/creative-tim/blocks/authentication-03"
export default function Page() {
return <Authentication03 />
}
An elegant password reset interface featuring a card overlay on a background image with dark overlay effect. Simple email input with clear messaging about recovery email timing. Built with shadcn/ui Card and Input components for a trustworthy password recovery experience.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROReset Password
You will receive an e-mail in maximum 60 seconds
import Authentication04 from "@/components/creative-tim/blocks/authentication-04"
export default function Page() {
return <Authentication04 />
}
A visually striking sign-in page with card overlay on full-screen background image. Features remember me checkbox, social authentication options, and a trust badge with star rating. Built with shadcn/ui components for a high-converting, trustworthy login experience.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROSign In
Enter your email and password to sign in
Or
Not registered?Create account
Trusted by 2M+ Users Worldwide
Join thousands of satisfied customers who trust our platform daily
import Authentication05 from "@/components/creative-tim/blocks/authentication-05"
export default function Page() {
return <Authentication05 />
}
A split-screen authentication layout with sign-in form on the left and company benefits showcase on the right. Features detailed benefit descriptions with star rating and trust badge. Built with shadcn/ui components for an engaging, conversion-focused login experience that highlights product value.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROWelcome Back
Secure Access
Your data is protected with enterprise-grade security
Fast & Simple
Sign in quickly with your preferred method
Always Available
Access your account anytime, anywhere
2M+ Users
import Authentication06 from "@/components/creative-tim/blocks/authentication-06"
export default function Page() {
return <Authentication06 />
}
Frequently asked questions
Do these auth blocks handle real login?
No, and that is on purpose. They are the front-end forms and flows. You connect them to your auth provider (NextAuth, Clerk, Supabase, Firebase, or your own backend), which does the actual checking. That keeps you free to use any provider.
Are they free to use?
Yes, the free auth blocks are copy-paste with no account and fine for commercial apps. A few advanced flows are PRO and marked on the block.
Do they include validation and error states?
The fields use shadcn/ui form components with the error and focus states styled, so you get the visual side. You wire the validation logic (or a library like Zod and react-hook-form) to the fields.
Can I add social login buttons?
Several blocks already include Google, GitHub, and similar buttons laid out. They are normal buttons, so you hook them to your provider's OAuth flow.
Do they work with Next.js?
Yes, they are built for React and Next.js with Tailwind and pair naturally with NextAuth or middleware-based auth. They also work in any React app with shadcn/ui installed.