$129 intro price

Components

Auth Form

Pro
Fernwood

Create your account

Enter your details to set up your account.

Have an account?

By continuing you agree to the terms and privacy policy.

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/auth-form

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

Unlock with Planes Pro

$129 once · 159 Pro components · lifetime updates.

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

<AuthForm
  layout="split"
  method="password"
  brand={{ name: "Fernwood", logo: <YourLogo /> }}
  onSignIn={async ({ email, password }) => {
    await signIn("credentials", { email, password });
  }}
  onSignUp={async ({ name, email, password }) => {
    await createAccount({ name, email, password });
  }}
  onForgot={(email) => requestReset(email)}
  onProvider={(id) => signIn(id)}
/>

Use cases

  • App sign-in page

    Connect the callbacks to Auth.js, Better Auth, Clerk or Supabase and rate-limit on the server; the component makes no network calls of its own.

  • Passwordless onboarding

    Set method="magic-link" or "otp" and the same card walks through the email, code and check-inbox steps.

  • Marketing site with a split panel

    layout="split" puts a quote or product shot beside the form from lg up and collapses to the card on phones.