shadszn/ui

Login Page

A centered login form with animated gradient orbs background, glass-morphism card, and social login placeholder.

Preview

S

Welcome back

Sign in to your account

Installation

npx shadcn@latest add @shadszn/login-page

Files Installed

  • login-page/page.tsx -- Main login page with form
  • login-page/components/gradient-orbs.tsx -- Animated background gradient orbs

Key Features

  • Animated gradient orb background for visual depth
  • Centered glass-morphism card with logo placeholder
  • Email and password fields with validation
  • Forgot password and sign up links
  • Uses Card, Input, and Button components

Customization

// Replace the logo placeholder with your brand
<div className="mx-auto mb-4 h-10 w-10 rounded-xl bg-[var(--brand-lavender-dim)] flex items-center justify-center">
  <YourLogoIcon />
</div>

// Wire up form submission
function handleSubmit(e: React.FormEvent) {
  e.preventDefault()
  // Add your authentication logic here
  await signIn({ email, password })
}