Model: Vercel-AI-7B

I need a modern authentication modal in React. It should have email/password fields, a "Continue with GitHub" button, and follow a stark, minimalist design (like Vercel or Linear). Just the UI structure.

Here is a clean, minimalist authentication modal component. It uses semantic HTML and standard CSS variables for easy theming.

AuthModal.tsx 
export default function AuthModal() {
  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <h2>Sign In</h2>
        <p className="text-muted">Enter your details to continue.</p>
        
        <form className="auth-form">
          <input type="email" placeholder="Email address" required />
          <input type="password" placeholder="Password" required />
          <button type="submit" className="btn-primary">Sign In</button>
        </form>
        
        <div className="divider"><span>OR</span></div>
        
        <button className="btn-outline">
          <GithubIcon /> Continue with GitHub
        </button>
      </div>
    </div>
  );
}

I've also staged this in the workspace on the right so you can see the file structure.

Powered by VULK
Workspace
Changes
components
AuthModal.tsx
styles.css
pages
index.tsx
1
import React from 'react';
2
import { GithubIcon } from './icons';
3
- export default function Login() {
3
+ export default function AuthModal() {
4
return (
5
+ <div className="modal-backdrop">
6
+ <div className="modal-content">
7
<h2>Sign In</h2>
8
{/* ... */}