Back to templates
Auth template

Elegant Login

Split-screen auth UI with login / register / forgot-password views, brand panel on the left, form on the right.

Next.jsTypeScriptTailwind CSSshadcn/ui
View on GitHubUpstream source

Clone it

terminalClone the template
git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./elegant-login
cd elegant-login
pnpm install
pnpm dev

What's in the box

  • Login / register / forgot-password views in a single page
  • Split-screen brand panel + form layout
  • Password show/hide toggle
  • Confirm-password support
  • Lucide icons for entry/exit affordances

When to use

Use it

Auth-first apps that need a polished split-screen sign-in experience before installing JB Better Auth UI. Good visual reference for your auth flow.

Skip it

Production auth — this template is UI-only with no backend wiring. Install JB Better Auth UI to make it real.

The 0 customization sections

When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.

    Customization prompt — paste into your AI agent

    After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:

    paste into your AI agentCustomization interview prompt
    I want to customize the "Elegant Login" template using the VibeKit customization guide.

Walk me through the 0 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.

After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.

CUSTOMIZATION GUIDE:
Re-brand the left panel (logo, color, marketing copy). For real auth, install JB Better Auth UI and wire form submissions to its actions. Keep this UI as the visual layer.

SECTIONS:


Begin with section 1 now.