A frosted sign-in card floating over a slowly drifting mesh gradient and glassy orbs, with provider buttons, email and password fields, validation and a success state.
Sign in to pick up where your team left off.
New to Lumen? Create an account
npx shadcn@latest add https://hyperblur.dev/r/login-glass-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-glass-card.tsx.
import { LoginGlassCard } from "@/components/hyperblur/login-glass-card"
<LoginGlassCard onSubmit={async (v) => (await fetch("/api/login", { method: "POST", body: JSON.stringify(v) })).ok} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Lumen" | Product name used in the footer and success message. |
| title | string | "Welcome back" | Card heading. |
| subtitle | string | "Sign in to pick up where your team left off." | Text under the heading. |
| providers | { id: string; label: string }[] | Google, GitHub, Apple | Provider buttons above the form. Pass an empty array to hide the row and divider. |
| defaultEmail | string | "" | Initial email value. |
| forgot | { label: string; href: string } | { label: "Forgot password?", href: "#forgot" } | Link next to the password label. |
| signup | { label: string; href: string } | { label: "Create an account", href: "#signup" } | Link in the card footer. |
| submitLabel | string | "Sign in" | Submit button text. |
| successMessage | string | "Signed in. Redirecting to your workspace." | Text shown after a successful submit. |
| onSubmit | (values: { email: string; password: string; remember: boolean }) => boolean | void | Promise<boolean | void> | Called with valid values. Return or resolve false, or throw, to show the error message. | |
| onProviderClick | (id: string) => void | Called with the provider id when a provider button is pressed. | |
| accent | string | "#8b5cf6" | Accent color for buttons, focus rings and highlights. |