# Login 4

> login

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/login-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/login-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/login-4/light.png
- Registry item: https://blocks.cnippet.dev/r/login-4.json
- Categories: login
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/login-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/button`, `@cnippet/input`, `@cnippet/label`, `@cnippet/separator`, `@cnippet/utils`

## Files

### `registry/default/sections/login-4.tsx`

```tsx
"use client";

import { Apple, Eye, EyeOff } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Marquee } from "@/components/ui/marquee";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

// Google Icon
function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={cn("h-5 w-5", className)} viewBox="0 0 24 24">
      <path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
        fill="#4285F4"
      />
      <path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
        fill="#FBBC05"
      />
      <path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </svg>
  );
}

// Book cover images
const bookCovers = [
  {
    color: "#3d5a45",
    hasImage: true,
    id: "1",
    imageSrc:
      "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300&h=200&fit=crop",
    title: "Book\nCover",
  },
  {
    color: "#f5f5f0",
    hasImage: false,
    id: "2",
    title: "",
  },
  {
    color: "#d4a853",
    hasImage: true,
    id: "3",
    imageSrc:
      "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=300&h=200&fit=crop",
    title: "",
  },
  {
    color: "#6b5b4f",
    hasImage: false,
    id: "4",
    title: "",
  },
  {
    color: "#c9463d",
    hasImage: true,
    id: "5",
    imageSrc:
      "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop",
    title: "",
  },
];

function BookCover({ book }: { book: (typeof bookCovers)[0] }) {
  return (
    <div
      className="relative h-64 w-48 shrink-0 overflow-hidden rounded-lg shadow-lg"
      style={{ backgroundColor: book.color }}
    >
      {book.title && (
        <div className="absolute inset-0 flex items-center justify-center p-6">
          <span className="whitespace-pre-line text-center font-serif text-3xl text-white leading-tight">
            {book.title}
          </span>
        </div>
      )}
      {book.hasImage && book.imageSrc && (
        <div className="absolute right-0 bottom-0 left-0 h-1/2">
          <img
            alt="Book cover"
            className="h-full w-full object-cover"
            src={book.imageSrc}
          />
        </div>
      )}
    </div>
  );
}

export function Login4() {
  const [showPassword, setShowPassword] = React.useState(false);

  return (
    <section className="flex min-h-screen w-full bg-[#faf9f6]">
      {/* Left - Book Covers Marquee */}
      <div className="hidden w-1/2 items-center justify-center overflow-hidden lg:flex">
        <div className="relative flex h-full w-full items-center">
          <Marquee
            className="h-150 [--duration:30s] [--gap:1.5rem]"
            pauseOnHover
            vertical
          >
            {bookCovers.map((book) => (
              <BookCover book={book} key={book.id} />
            ))}
          </Marquee>
          <Marquee
            className="ml-6 h-150 [--duration:35s] [--gap:1.5rem]"
            pauseOnHover
            reverse
            vertical
          >
            {[...bookCovers].reverse().map((book) => (
              <BookCover book={book} key={`rev-${book.id}`} />
            ))}
          </Marquee>
        </div>
      </div>

      {/* Right - Login Form */}
      <div className="flex w-full items-center justify-center p-8 lg:w-1/2">
        <div className="w-full max-w-md">
          {/* Header */}
          <div className="mb-8 text-center">
            <h1 className="mb-3 font-bold font-serif text-4xl text-gray-900 tracking-wide dark:text-gray-100">
              LOGIN
            </h1>
            <p className="text-gray-600 text-sm dark:text-gray-400">
              Don't have an account yet?{" "}
              <a
                className="font-medium text-[#c9463d] hover:underline"
                href="#"
              >
                Sign up now
              </a>
            </p>
          </div>

          {/* Social Login */}
          <div className="mb-6 space-y-3">
            <Button
              className="h-12 w-full gap-3 rounded-xl border-gray-200 bg-white hover:bg-neutral-50 dark:border-neutral-700"
              variant="outline"
            >
              <GoogleIcon />
              <span className="text-gray-700 text-sm dark:text-gray-300">
                Continue with Google
              </span>
            </Button>
            <Button
              className="h-12 w-full gap-3 rounded-xl border-gray-200 bg-white hover:bg-neutral-50 dark:border-neutral-700"
              variant="outline"
            >
              <Apple className="h-5 w-5" />
              <span className="text-gray-700 text-sm dark:text-gray-300">
                Continue with Apple
              </span>
            </Button>
          </div>

          {/* Divider */}
          <div className="mb-6 flex items-center gap-4">
            <Separator className="flex-1" />
            <span className="font-medium text-neutral-400 text-xs">OR</span>
            <Separator className="flex-1" />
          </div>

          {/* Form */}
          <form className="space-y-5">
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Email<span className="text-red-500">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl border-gray-200 dark:border-neutral-700"
                placeholder="youremail@here"
                type="email"
              />
            </div>

            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Password<span className="text-red-500">*</span>
              </Label>
              <div className="relative">
                <Input
                  className="h-12 rounded-xl border-gray-200 pr-12 dark:border-neutral-700"
                  placeholder="Password"
                  type={showPassword ? "text" : "password"}
                />
                <button
                  className="absolute top-1/2 right-4 -translate-y-1/2 text-neutral-400 hover:text-gray-600 dark:text-gray-400"
                  onClick={() => setShowPassword(!showPassword)}
                  type="button"
                >
                  {showPassword ? (
                    <Eye className="h-5 w-5" />
                  ) : (
                    <EyeOff className="h-5 w-5" />
                  )}
                </button>
              </div>
            </div>

            <Button
              className="h-12 w-full rounded-xl bg-[#3d5a45] font-medium text-white hover:bg-[#2d4535]"
              type="submit"
            >
              Sign in
            </Button>
          </form>

          {/* Footer */}
          <p className="mt-8 text-center text-neutral-400 text-xs">
            ©2025 Terrace.com
          </p>
        </div>
      </div>
    </section>
  );
}

export default Login4;
```

### `components/ui/marquee.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

import type { ComponentPropsWithoutRef } from "react";
import { cn } from "@/lib/utils";

interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children: React.ReactNode;
  vertical?: boolean;
  repeat?: number;
}

export function Marquee({
  className,
  reverse = false,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
        {
          "flex-col": vertical,
          "flex-row": !vertical,
        },
        className,
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            className={cn("flex shrink-0 justify-around gap-(--gap)", {
              "animate-marquee flex-row": !vertical,
              "animate-marquee-vertical flex-col": vertical,
              "direction-[reverse]": reverse,
              "group-hover:paused": pauseOnHover,
            })}
            key={i}
          >
            {children}
          </div>
        ))}
    </div>
  );
}
```