## Sign-in Card (S—145)

A two-step sign-in: email first, then password slides in with show / hide, plus a magic-link option and inline errors.

- URL: https://sundaeui.dev/components/sign-in-card
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/sign-in-card.json`
- Tags: sign-in, form, auth, login, magic-link, password

Step one asks only for email and validates it inline. Continue slides the card to the password step, with the email shown as an editable chip at the top.
Password has a show / hide toggle and caps-lock warning; “Email me a link instead” swaps to a sent confirmation.

### Usage

```tsx
import { SignInCard } from '@/components/sundae/sign-in-card'

<SignInCard />
```

### Props

- `onSignIn` (`(email: string, password: string) => Promise<boolean>`): Return false for wrong password.
- `onMagicLink` (`(email: string) => void`): Send a magic link.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product sign-in pages and modals.

### When not to use

- SSO-only products: show the provider buttons instead.

### Accessibility

- Each step is a form with labelled fields; errors use aria-invalid and aria-describedby.
- Focus moves to the first field of each step; caps lock is announced.
- Reduced motion removes the movement and keeps every state change.