Both layouts put the providers after the email form, since that is the path the card is built around. stacked gives each provider a full-width button with its name, which suits a dedicated sign-in page where there is room to spell them out. inline shrinks them to icon-only squares, compact enough for a modal or a narrow panel and able to carry more providers in the same space. Both read the same providers array, so switching is one prop.

Passing media turns the card into a two-column split: the form on the left, whatever you hand it on the right. It is the shape for a dedicated sign-up page, where there is room for artwork and the extra fields that go with it. Below md the media is dropped rather than stacked, since a tall image above the fields pushes the form off a phone screen for no gain.

media takes any node, so a single image or a video works. AuthMediaCarousel ships alongside the card for the common case: hand it a list of images and it crossfades between them on its own, holding on the first under prefers-reduced-motion. It offers no arrows on purpose — artwork beside a sign-in form is atmosphere, and controls invite the visitor away from what they came to do.

Three options usually travel with it: centered for the heading, confirmPassword to pair the two password fields on one row, and footnote for small print that sits under the card rather than crowding the CTA. The providers use layout="grid", which spreads icon-only buttons across equal columns so they read as one row of controls.

Create your account

Enter your email below to create your account

Email*

We use this to contact you, and never share it.

Password*

Confirm password*

Create account

or continue with

Already have an account? Sign in

By clicking continue, you agree to our Terms of Service and Privacy Policy.

logo puts a mark above the title, following centeredfor its alignment. It takes a node rather than an image path on purpose: the card stays brand-agnostic, so an installed copy carries none of BoardUI's artwork and drops in your own. The demo passes the animated Pro badge.

mode switches the copy and the fields. signin carries remember me and a forgot-password link; signup adds a name field and the terms line, and drops the two controls that only make sense on a return visit.

mode="verify" is the step after signing in or up: the OTP boxes replace the email and password fields, a resend action replaces the link to the other mode, and the providers disappear entirely, since whoever is looking at this has already chosen how they sign in. It keeps the same left-aligned shape as the other two modes, so the step reads as part of the same flow, and takes a mail mark by default, which logo overrides.

Pass email to name the address in the description, and onComplete to act the moment the last digit lands rather than waiting for the button.

Any of the social button's 24 brands, in the order you list them. They use the outlined whiteappearance, which is the one that shows each provider's real multi-colour mark: a stack of saturated brand fills competes with itself and makes no single option readable.

The card is the shell, not an opinion about authentication. The form is uncontrolled and onSubmit hands you its FormData, while onProvider fires with the brand that was clicked, so both go straight to NextAuth, Clerk, Supabase or your own endpoint.