Login Form

A responsive login page implementation across React, Vue, and Lit.

View on GitHub

Mobile

Tablet

Desktop

What's Included

• Three framework examples: React, Vue, and Lit implementations
• Responsive layouts: Mobile, tablet (floating card), desktop (two-column)
• PROMPT.md: Feed directly to your LLM for AI-assisted customization

Quick Start

# Clone and navigate to a framework example
git clone https://github.com/AgnosticUI/agnosticui.git
cd agnosticui/v2/playbooks/login/react-example  # or vue-example, lit-example

# Install and run
npm install
npm run dev

Using with an LLM

The PROMPT.md file contains everything an AI assistant needs to understand and modify the login form:

1. Copy the PROMPT.md contents
2. Paste into Claude, ChatGPT, or your preferred LLM
3. Ask for customizations: "Change the social buttons to Apple and GitHub sign-in"

Components Used

Component	Purpose
ag-button	Login and social sign-in buttons
ag-input	Email and password fields with icon addons
ag-checkbox	"Remember me" option
ag-link	"Forgot password?" and "Sign up" links
ag-divider	"or" separator
ag-card	Floating card on tablet breakpoint

Responsive Behavior

Breakpoint	Layout
Mobile (<768px)	Form only, white background
Tablet (768-1199px)	Floating card over full-bleed background
Desktop (≥1200px)	Two-column: 40% form / 60% hero image