A sign-in card with a live status rail beside the form: edge latency with a moving sparkline, workspace detection that switches to SSO for known domains, password policy, device trust and session issuance, each lighting up as you type.
npx shadcn@latest add https://hyperblur.dev/r/auth-status-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-status-rail.tsx.
import { AuthStatusRail } from "@/components/hyperblur/auth-status-rail"
<AuthStatusRail ssoDomains={["acme.com"]} onSubmit={async ({ email, password, sso }) => (sso ? startSso(email) : signIn(email, password))} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Relaybase" | Product name above the form. |
| title | string | "Sign in to Relaybase" | Form heading. |
| subtitle | string | "Every step of your sign-in is checked in the open..." | Text under the heading. |
| region | string | "fra1 Frankfurt" | Edge region shown in the first rail step. |
| device | string | "MacBook Pro, Lisbon" | Recognized device shown in the rail. |
| ssoDomains | string[] | ["acme.com", "globex.io"] | Email domains that hide the password and switch the button to SSO. |
| pings | number[] | 12 latency samples | Latency samples in ms that cycle through the sparkline. |
| defaultEmail | string | "" | Prefills the email field. |
| forgotHref | string | "#forgot" | Target of the Forgot link. |
| statusHref | string | "#status" | Target of the All systems normal link. |
| onSubmit | (values: { email: string; password: string; sso: boolean }) => boolean | void | Promise<boolean | void> | Called after validation; sso is true for SSO domains. Resolve false to show an error. | |
| accent | string | "#34d399" | Rail, sparkline and SSO button color. |