# Sign in

> Password or magic link, SSO and GitHub, inline validation and a check-your-email state.

Block · Free · https://lodeui.com/blocks/sign-in

## When to use

- Your app's sign-in page.

## When not to use

- Sign-up flows that need more fields.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/sign-in.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignIn } from "@/components/blocks/sign-in";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <SignIn />
    </main>
  );
}
```

Built from: Button, Input

## API reference

### SignIn

Sign in with password or a magic link, plus SSO and GitHub, with inline validation and an error state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields and providers |
| Enter | Submit |

## Accessibility

- Fields have labels and autocomplete; errors use role="alert".

## Motion

- Switching to magic link crossfades the form; success slides in.

## Responsive behavior

- Fits 320px; providers stack on phones.

## Performance

- No dependencies beyond the button and input.

## Notes for AI

- Replace the simulated submit with your auth client, e.g. signIn.email().

## Related

- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.