A centered sign-in card with social buttons, floating-label fields, error alert, loading state and sign-up link.
Sign in to your account to continue.
Don't have an account?Sign up
npx shadcn@latest add https://hyperblur.dev/r/login-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-card.tsx.
import { LoginCard } from "@/components/hyperblur/login-card"
<LoginCard error={error} loading={pending} onSubmit={({ email, password }) => signIn(email, password)} signupHref="/signup" />| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | accent logo mark | Logo slot above the title. Pass null to hide it. |
| title | string | "Welcome back" | Card heading. |
| subtitle | string | "Sign in to your account to continue." | Text under the heading. |
| providers | { label: string; icon?: ReactNode; onClick?: () => void }[] | GitHub and Google | Social buttons. Empty array hides them and the divider. |
| onSubmit | (values: { email: string; password: string }) => void | Called with the field values when the form is submitted. The page never reloads. | |
| loading | boolean | false | Shows a spinner and disables the fields and buttons. |
| error | string | null | null | Message shown in a red alert. Also sets aria-invalid on both fields. |
| accent | string | "#2f7bff" | Accent color for focus rings, submit button and links. |
| signupHref | string | "#" | Link target of the sign-up link in the footer. |
| forgotHref | string | "#" | Link target of the Forgot password? link. |
| submitLabel | string | "Sign in" | Submit button text. |