Get everything for $99, lifetime

Components

Portal Login

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/portal-login

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { PortalLogin } from "@/components/ui/PortalLogin";

<PortalLogin
  imageSrc="/future.webp"
  onSubmit={async (email, password) => {
    await signIn(email, password);
  }}
  onProviderClick={(id) => signInWith(id)}
/>

Use cases

  • Product sign-in page

    An email-first login route where the artwork carries the brand and the form stays short.

  • Magic-link or OTP entry

    Collect the email, hand it to your auth provider, and let the button hold its loading state until the link is sent.

  • Workspace or team login

    Passkey and SSO tiles sit alongside the consumer providers for org accounts.

  • Waitlist or beta gate

    Drop the providers and reuse the email field on its own to gate an early-access build.