sign in

Sign-in

About

this is sign

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

Code

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

Usage.tsx

'use client'

import { SignInPage } from "@/components/ui/sign-in";

const SignInPageDemo = () => {
  const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const data = Object.fromEntries(formData.entries());
    console.log("Sign In submitted:", data);
    alert(`Sign In Submitted! Check the browser console for form data.`);
  };

  const handleGoogleSignIn = () => {
    console.log("Continue with Google clicked");
    alert("Continue with Google clicked");
  };

  const handleResetPassword = () => {
    alert("Reset Password clicked");
  };

  const handleCreateAccount = () => {
    alert("Create Account clicked");
  };

  return (
    <div className="bg-background w-full flex-1 justify-center p-4 items-center h-screen  text-foreground">
      <SignInPage
        heroImageSrc="https://cdn.21st.dev/assets/mirror/f8/f8c3307d8145cc5fe32416521e290e23ae70f2ca9c6185d3d2e4d4d3c7a76f0b.jpg"
        onSignIn={handleSignIn}
        onGoogleSignIn={handleGoogleSignIn}
        onResetPassword={handleResetPassword}
        onCreateAccount={handleCreateAccount}
      />
    </div>
  );
};

export default SignInPageDemo;