Form

Galleries

About

Auth Form With Image Collage This component provides a responsive, two-panel layout for authentication forms. It uses CSS Grid for the main structure, ensuring the form and image collage stack vertically on smaller screens. The right panel features a staggered fade-in animation for the images, powered by framer-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form to your project and fits it to your theme.

Code

How Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { AuthFormWithImageCollage } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

// Define the form fields for the demo
const SignUpForm = (
  <form className="grid gap-4">
    <div className="grid grid-cols-2 gap-4">
      <div className="grid gap-2">
        <Label htmlFor="company-name">Company</Label>
        <Input id="company-name" placeholder="Asos" defaultValue="Asos" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="brand-url">Brand URL</Label>
        <Input id="brand-url" placeholder="your-brand.com" required />
      </div>
    </div>
    <div className="grid grid-cols-2 gap-4">
      <div className="grid gap-2">
        <Label htmlFor="first-name">First name</Label>
        <Input id="first-name" placeholder="Max" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="last-name">Last name</Label>
        <Input id="last-name" placeholder="Robinson" required />
      </div>
    </div>
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="m@example.com"
        required
      />
    </div>
    <div className="grid gap-2">
      <Label htmlFor="password">Password</Label>
      <Input id="password" type="password" required />
    </div>
    <Button type="submit" className="w-full">
      Sign up
    </Button>
  </form>
);

// Footer content with links
const FooterContent = (
  <p>
    By signing up, you confirm that you accept the{" "}
    <a href="#" className="underline">
      Terms of Use
    </a>{" "}
    and{" "}
    <a href="#" className="underline">
      Privacy Policy
    </a>
    .
  </p>
);

// Logo component
const Logo = () => (
  <svg
    width="32"
    height="32"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6 3H18V7H14V11H10V7H6V3Z"
      className="fill-foreground"
    />
    <path
      d="M6 13H10V17H14V21H6V13Z"
      className="fill-foreground"
    />
  </svg>
);

// Image data for the collage
const collageImages = [
  {
    src: "https://cdn.21st.dev/assets/mirror/ae/ae90cda09bb8b422323b8f1959c405b39a88ea741bd4850ea206f562e197390b.jpg",
    alt: "Fashion model in a hype sweatshirt",
    className: "col-span-1 row-span-2", // Spans 2 rows
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/dc/dc804b0cf90e5771620366176afbf59cb979cd71086203962cbdd6d364c23924.jpg",
    alt: "Well-dressed man",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/3c/3ccae6e7e43b4b2dcc8649607fbe6ca41a730f9f7d52c30bf658452d4ee551a7.jpg",
    alt: "Woman with purple hair",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/0d/0d590d37b6ebb1387da516c6314f17de2ce3d7b2a0755f3c8bcb4faf7ab5d42f.jpg",
    alt: "Woman with curly hair",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/c8/c85c1b33180cf6883f0aeb7c32b396638012a95d12060dbe76bb66ef0b8cf9e3.jpg",
    alt: "Man with a beard",
    className: "col-span-1 row-span-1",
  },
];


export default function AuthFormWithImageCollageDemo() {
  return (
    <AuthFormWithImageCollage
      logo={<Logo />}
      title="Connect with top talents"
      form={SignUpForm}
      footer={FooterContent}
      images={collageImages}
    />
  );
}