Login Card

A stylish login card with form elements and social login options.

Preview Size:

Welcome Back

Sign in to your account

Forgot password?

Don't have an account? Sign up

Viewing in Desktop size (1200px × 800px)View Full Size

Usage Instructions

Installation

Copy the component code and paste it into your project. Make sure you have the required dependencies installed.

bash
npm install framer-motion lucide-react

Basic Usage

Import and use the component in your React application:

tsx
import { LoginCard } from '@/components/login-card';

export default function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LoginCard />
    </div>
  );
}

Customization

This component accepts various props for customization. Check the component code to see all available props and their types.

Component Info

Category

Forms

Framework

React + Next.js

Styling

Tailwind CSSCSS

Dependencies

framer-motionlucide-react

Quick Actions

Full Preview