Prodular UI

Sign in

Pro

A split sign-in screen: email and password, single sign-on and magic link options on the left, a calm product visual built from real components and a customer quote on the right.

Open full screen
Sign in screen from Prodular UI

Install

The screen lands in app/sign-in/ with every component it uses. Change it like any other code in your app. It is part of Prodular UI Pro, so run npx prodular-ui login first. See pricing.

npx prodular-ui add sign-in

States

The screen ships with 5 states. Pick one with the tabs above the preview, with ?state= in the URL, or with the state prop from your app.

  • Default
  • Wrong password
  • SSO
  • Magic link sent
  • Locked

Files

  • app/sign-in/page.tsx
  • app/sign-in/states.tsx
  • app/sign-in/relay-logo.tsx