# Moder Login Form

> This React component implements a user login form with a clean and modern UI.  It leverages reusable UI components for a structured and maintainable design. The form includes fields for email and password, a password reset link, and options for login via email or Google.   **Problem Solved:** This component provides a pre-built, styled login form, saving developers time and effort in creating a user-friendly authentication interface.  It promotes consistency in UI design across an application.  **How it Works:** 1. **Imports:** The code imports necessary modules, including a utility function `cn` (likely for class name concatenation), and various UI components (Button, Card, Input, Label) from a component library.  2. **Component Structure:** The `LoginForm` component uses a card layout to visually group form elements.  It employs a flexible grid system (likely Tailwind CSS) for responsive layout.  3. **Form Elements:**  Standard HTML form elements (input fields for email and password) are used within the component.  Labels are associated with each input using the `htmlFor` attribute.  4. **Styling:**  The `cn` function likely handles combining CSS classes for styling, allowing for flexibility in applying custom styles or themes.  The component uses a column-based layout (`flex flex-col`) and spacing utilities (`gap-6`, `gap-3`). 5. **Functionality:**  The form itself is handled by standard HTML form submission.  The `type="submit"` attribute on the button triggers the form submission.  No specific backend integration is shown in this snippet.  6. **Password Reset and Signup:** Links are provided for users to reset their passwords or sign up for an account (these likely navigate to other parts of the application).  **Libraries/Frameworks:** The code utilizes a component library for reusable UI elements (Button, Card, Input, Label), and a utility function for class name manipulation.  A CSS framework (likely Tailwind CSS, based on the class names) is used for styling and layout.  **Example Scenarios:** This component can be used in various applications requiring user authentication, such as web apps, dashboards, or SaaS platforms.  It enhances the user experience by providing a visually appealing and easy-to-use login interface.  **Note:**  This code snippet focuses on the front-end UI; backend integration for handling login requests is not included.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- Live preview: https://21st.dev/@uniquesonu/components/moder-login-form

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/moder-login-form?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt