A full-width sign-in section: a brand panel with a drifting gradient and rotating customer quotes on one side, a complete email and password form with social buttons on the other.
Every release, one calm place to ship it.
“We moved 38 services onto Lumen in a weekend. Release day went from a war room to a Slack message.”
New to Lumen? Start a free trial
Protected by single sign-on and hardware key support.
npx shadcn@latest add https://hyperblur.dev/r/auth-split-brand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-split-brand.tsx.
import { AuthSplitBrand } from "@/components/hyperblur/auth-split-brand"
<AuthSplitBrand brand="Lumen" onSubmit={async ({ email, password }) => signIn(email, password)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Lumen" | Product name shown in the logo, the form copy and the success state. |
| headline | string | "Every release, one calm place to ship it." | Large statement on the brand panel. |
| stats | string[] | ["4,200 teams", "99.99% uptime", "SOC 2 Type II"] | Small proof pills under the headline. Pass an empty array to hide them. |
| testimonials | { quote: string; name: string; role: string }[] | 3 customer quotes | Quotes that rotate on the brand panel. Rotation pauses on hover and focus. |
| interval | number | 6000 | Milliseconds each quote stays on screen. |
| title | string | "Welcome back" | Form heading. |
| signup | { label: string; href: string } | null | { label: "Start a free trial", href: "#signup" } | Sign-up link under the heading. Pass null to hide it. |
| forgotHref | string | "#forgot" | Target of the Forgot password link. |
| providers | { id: string; label: string }[] | Google, GitHub, SSO | Social sign-in buttons, drawn with neutral glyphs. Pass an empty array to hide them. |
| onProviderClick | (id: string) => void | Called with the provider id when a social button is clicked. | |
| onSubmit | (values: { email: string; password: string; remember: boolean }) => void | Promise<unknown> | Called with the values after validation passes. If it returns a promise the button shows a loading state until it settles; a rejection shows its message above the form. | |
| defaultEmail | string | "" | Prefills the email field. |
| accent | string | "#8b5cf6" | Gradient, focus ring and button color. |