# Sign In

> The SignInCard is a sophisticated, standalone sign-in component featuring advanced interactive elements and polished visual effects. It implements a modern 3D card design with mouse-tracking rotation, parallax depth effects, and an animated background blob that follows cursor movement. The component offers seamless dark/light mode switching with smooth transitions between themes. Users can sign in with email and password (featuring animated input fields with focus states) or choose from social login options. Additional UI enhancements include custom cursor effects, animated button states, and a success screen with animations. The component is fully self-contained with inline styles and dynamically injected keyframes, making it highly portable while delivering a premium, app-like authentication experience.

- Author: [Mudit Goel](https://21st.dev/@muditgoel1512)
- License: mit
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@muditgoel1512/components/sign-in-1

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/muditgoel1512/sign-in-1?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