Five full sign-in and sign-up screens: a split page with an auto-playing product story, a centered card, a passwordless magic-code flow, a wide landscape card and a sign-up with SSO and a strength meter. Forms validate, swap states with blur crossfades and spring between steps.
Split showcase
split-showcase.tsxSign-in form on the left; on wide containers an auto-playing product story with springing bars and progress dots on the right.
| Prop | Type | Default | Description |
|---|---|---|---|
productName | string | "Kestrel" | Shown in the logo lockup and copy. |
heading | string | "Welcome back" | Form heading. |
subheading | string | — | Line under the heading. |
onSubmit | (values: { email; password; remember }) => void | Promise<void> | — | Runs after validation. Throw an Error to show its message above the form. |
onForgotPassword | () => void | — | Forgot-password link handler. |
onSignUp | () => void | — | Create-account link handler. |
stories | ShowcaseStory[] | — | { metric, value, title, body, bars } slides for the story panel. |
interval | number | 5200 | Milliseconds per slide. Autoplay pauses on hover/focus and under reduced motion. |
className | string | — | Classes for the outer container. |
Centered card
centered-card.tsxOne card on a masked grid with a breathing glow; a gliding sign-in / create-account switch springs the name field open and resizes the card.
| Prop | Type | Default | Description |
|---|---|---|---|
productName | string | "Kestrel" | Used in headings and the monogram. |
defaultMode | "sign-in" | "sign-up" | "sign-in" | Tab shown first. |
onSubmit | (values: { mode; name?; email; password }) => void | Promise<void> | — | Runs after validation. Throw to show an error. |
onProvider | (provider: "google" | "github") => void | Promise<void> | — | Provider button handler. |
onForgotPassword | () => void | — | Forgot-password handler (sign-in mode). |
termsHref | string | "#terms" | Terms link. |
privacyHref | string | "#privacy" | Privacy link. |
className | string | — | Classes for the outer container. |
Magic code
magic-code.tsxPasswordless flow: email, then a six-digit OTP field with a resend countdown, then success, while a shape-built envelope opens and a letter rises.
| Prop | Type | Default | Description |
|---|---|---|---|
productName | string | "Kestrel" | Header and success button label. |
onSendCode | (email: string) => void | Promise<void> | — | Sends the code. Throw to show an error. |
onVerify | (email: string, code: string) => boolean | Promise<boolean> | — | Return true to sign in, false to shake and clear. Defaults to accepting any code except all zeros. |
onContinue | (email: string) => void | — | Success-screen button handler. |
resendAfter | number | 30 | Seconds before resend unlocks. |
codeLength | number | 6 | Number of code digits. |
className | string | — | Classes for the outer container. |
Landscape card
landscape-card.tsxWide card with a landscape drawn from circles and rounded shapes (sun, drifting clouds, swaying trees) beside a form with a passkey option and stay-signed-in switch.
| Prop | Type | Default | Description |
|---|---|---|---|
productName | string | "Kestrel" | Brand chip over the illustration. |
heading | string | "Sign in to Kestrel" | Form heading. |
subheading | string | — | Line under the heading. |
caption | string | — | Large caption over the illustration on wide containers. |
onSubmit | (values: { email; password; staySignedIn }) => void | Promise<void> | — | Runs after validation. Throw to show an error. |
onPasskey | () => void | Promise<void> | — | Passkey button handler. |
onForgotPassword | () => void | — | Reset-password handler. |
onSignUp | () => void | — | Trial link handler. |
className | string | — | Classes for the outer container. |
Atlas split
atlas-split.tsxSign-up with a topographic map panel whose contour lines draw in, a row of SSO buttons and a password field with a four-segment strength meter and live rule checklist.
| Prop | Type | Default | Description |
|---|---|---|---|
productName | string | "Kestrel" | Logo lockup on the map panel. |
heading | string | "Create your workspace" | Form heading. |
subheading | string | — | Line under the heading. |
quote | { body; name; role } | — | Testimonial on the map panel. |
providers | ("google" | "microsoft" | "github" | "saml")[] | all four | SSO buttons, in order. |
onSubmit | (values: { name; email; password }) => void | Promise<void> | — | Runs once fields are valid, the password meets 3 of 4 rules and terms are accepted. |
onProvider | (provider) => void | Promise<void> | — | SSO button handler. |
onSignIn | () => void | — | Sign-in link handler. |
className | string | — | Classes for the outer container. |
Install the whole set
Installs every auth variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every field has a visible label; errors are tied to fields with aria-describedby and focus moves to the first invalid field on submit.
- Show-password, mode switches and story dots are real buttons with aria-pressed or tab semantics and arrow-key support.
- Step and state changes are announced through role=status regions; large motion falls back to fades under reduced motion.