About this block

Split Login Illustrated is a complete login screen with a calm illustration beside it. The page is a muted inset tray and the screen sits 8px inside it. The form half holds a bare brand mark, a welcome heading, labeled email and password fields (the password with a show and hide toggle), a remember me checkbox beside the reset link, the primary pill, a mono OR divider and a ghost Google pill, with help and legal links pinned to the foot.

The other half is an illustration run edge to edge: a quiet courtyard garden drawn in grayscale, so it sits inside any neutral theme. It ships as a day and a night version that swap with the theme, and it is anchored to the top so taller screens crop only the water at its foot.

When to use

Use it when returning users land on the login screen often enough that it is worth making pleasant, such as a studio tool, a planning app or a client portal. The labeled fields and the remember me row make it a practical default, and the illustration gives the moment some character without adding copy.

A natural flow around it:

Before

• A hero section whose sign in link lands here

After

• Depth Signup for new visitors who follow the create account link

What you can customize

• Fields. The form uses the shadcn Input, Label and Checkbox, so wiring it to your auth library is a matter of names and handlers.
• Providers. Swap the Google pill for your own provider, or add a second below it.
• The illustration. Replace the light and dark images with your own pair. Portrait artwork works best; keep anything important in the upper part.

Tip: keep the heading and lede to one line each. The stack is centered on the screen, and extra lines push the fields below the fold on short laptops.