# Gamified Login Card

> The Gamified Login Card is a playful and interactive login component designed to boost user engagement while maintaining a clean, modern look. Built strictly with shadcn UI components, it features micro-interactions such as input hover scaling and button animations, providing instant visual feedback. On successful login, a confetti animation celebrates the user’s action, while the login text dynamically updates to a welcoming message. Fully responsive and theme-aware, this component works seamlessly in both light and dark modes, offering a fun and rewarding login experience that aligns with apps aiming for a gamified or playful brand identity.

- 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/gamified-login-card

## Install

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