A light sign-in page that leads with a grid of provider buttons with generic glyphs and a Last used badge, then an email and password form below a divider.
Pick the account you use at work. We'll match you to your team's workspace automatically.
No account yet? Start a free trial
By continuing you agree to the Terms and Privacy Policy.
npx shadcn@latest add https://hyperblur.dev/r/login-social-first.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-social-first.tsx.
import { LoginSocialFirst } from "@/components/hyperblur/login-social-first"
<LoginSocialFirst lastUsed="github" onProviderClick={(id) => signIn(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Sign in to Parcel" | Page heading. |
| subtitle | string | "Pick the account you use at work..." | Text under the heading. |
| providers | { id: string; label: string; glyph?: "ring" | "square" | "triangle" | "hex" | "bolt" | "key"; color?: string }[] | Six providers | Provider buttons. Glyph picks a generic icon and color tints it. |
| lastUsed | string | null | "google" | Provider id that gets the Last used badge and highlight. |
| onProviderClick | (id: string) => void | Called with the provider id. | |
| onSubmit | (values: { email: string; password: string }) => boolean | void | Promise<boolean | void> | Called with valid email and password. Return false to show an error. | |
| signup | { label: string; href: string } | { label: "Start a free trial", href: "#signup" } | Sign-up link in the footer. |
| terms | { label: string; href: string } | { label: "Terms", href: "#terms" } | Terms link. |
| privacy | { label: string; href: string } | { label: "Privacy Policy", href: "#privacy" } | Privacy link. |
| accent | string | "#2f7bff" | Accent color for buttons, focus rings and highlights. |