# Login Card

> The Login with Background Animation component is a modern, premium login interface built entirely with shadcn UI components. It features a dynamic animated gradient background paired with subtle floating particles, creating depth and a visually engaging experience without overwhelming the user. The login card itself remains clean and focused, containing email and password inputs along with a primary action button, all fully responsive and theme-aware for light and dark modes. This design enhances the perceived quality of the application, making it ideal for SaaS platforms, dashboards, or any modern web product that wants to impress users from the first interaction.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/login-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