Browse components
Login Form
A polished sign-in card with social buttons, password reveal, remember me, animated inline validation, a shake on error and a loading-to-success flow.
Installation
npx shadcn@latest add @glint-ui/login-formFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/login-form.json
Usage
import { LoginForm } from "@/components/ui/login-form";
<LoginForm
onSubmit={async ({ email, password, remember }) => {
const res = await signIn(email, password, remember);
if (!res.ok) throw new Error("Incorrect email or password.");
}}
footer={<>No account? <a href="/signup">Sign up</a></>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Welcome back" | Card heading. |
| description | string | "Sign in to continue to your workspace." | Text under the heading. |
| submitLabel | string | "Sign in" | Submit button label. |
| showSocial | boolean | true | Show the GitHub / Google buttons. |
| showRemember | boolean | true | Show the Remember me checkbox. |
| minPasswordLength | number | 8 | Minimum password length for validation. |
| onSubmit | ReactNode | — | `(values) => void | Promise<void>`. Throw an Error to show its message as a form error. |
| onSocial | ReactNode | — | `(provider: "github" | "google") => void | Promise<void>`. |
| footer | ReactNode | — | Content under the form, e.g. a sign-up link. |
| className | string | — | Extra classes for the root element. |