Live preview from the library's source
Install
From shadcn/ui
npx shadcn@latest add https://ui.shadcn.com/r/styles/new-york-v4/login-02.jsonFrom this collection
npx shadcn@latest add https://allcomps.vercel.app/r/ui-shadcn--login-02.jsonCode
import { GalleryVerticalEnd } from "lucide-react"
import { LoginForm } from "@/registry/new-york-v4/blocks/login-02/components/login-form"
export default function LoginPage() {
return (
<div className="grid min-h-svh lg:grid-cols-2">
<div className="flex flex-col gap-4 p-6 md:p-10">
<div className="flex justify-center gap-2 md:justify-start">
<a href="#" className="flex items-center gap-2 font-medium">
<div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
<GalleryVerticalEnd className="size-4" />
</div>
Acme Inc.
</a>
</div>
<div className="flex flex-1 items-center justify-center">
<div className="w-full max-w-xs">
<LoginForm />
</div>
</div>
</div>
<div className="relative hidden bg-muted lg:block">
<img
src="/placeholder.svg"
alt="Image"
className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
</div>
)
}
Other auth screens
The same kind of component from the other libraries in the collection.