Login Form

v1.0.0

Authentication

A complete login form with email/password fields, social login options, and forgot password link.

Dependencies

lucide-react

@/components/ui/button

@/components/ui/input

@/components/ui/label

@/components/ui/separator

@/components/ui/card

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/login-form.json

Manual Installation

// 1. Install dependencies
npm install lucide-react

// 2. Install required shadcn components
npx shadcn@latest add button input label separator card

// 3. Copy the component code to components/auth/login-form.tsx

// 4. Usage example:
import { LoginForm } from "@/components/auth/login-form"

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <LoginForm
        onSubmit={async (data) => {
          // Your authentication logic here
          console.log("Login:", data)
        }}
        loading={false}
        showSocial={true}
      />
    </div>
  )
}

Props

Component properties and their types

onSubmit

(data: { email: string; password: string }) => void | Promise<void>

default: undefined

Callback executed when the form is submitted.

loading

boolean

default: false

Show a spinner and disable the form while a request is in flight.

showSocial

boolean

default: true

Whether to display social login buttons (GitHub/Google).

className

string

default: ''

Additional CSS classes to apply to the form container.

Examples

3 different usage examples

Basic Login Form

import { LoginForm } from "@/components/auth/login-form"

export default function LoginPage() {
  const handleLogin = async (data: { email: string; password: string }) => {
    console.log("Login attempt:", data)
    // Add your authentication logic here
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <LoginForm onSubmit={handleLogin} />
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

3 examples available

Welcome back

Enter your credentials to access your account

Or continue with

Don't have an account?