# Sign In Card

> This SignInCard component is a modern, theme-aware login interface built with Shadcn UI and Tailwind CSS. It closely mirrors Microsoft’s official sign-in design, featuring the authentic Microsoft logo, a clean header, an input field for email or username, and action links for account creation or password recovery. The footer provides clear navigation with Back and Next buttons, styled for accessibility in both light and dark modes. Its responsive, card-based layout makes it suitable for authentication flows in SaaS platforms, enterprise apps, and portals where a familiar, professional sign-in experience enhances user trust and usability.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: next
- Live preview: https://21st.dev/@ruixen.ui/components/sign-in-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/sign-in-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt