# Success Login Card

> The Card with Micro-Animations on Success is a polished and configurable login card built with shadcn UI components, designed to provide users with instant, professional feedback. Instead of plain static messages, this card delivers subtle success animations such as a checkmark drawing itself or a smooth background color shift, creating a sense of accomplishment without unnecessary clutter. Developers can pass in customizable props like fields, onChange, onSubmit, and even choose the animationType (checkmark, color-shift, or none) depending on the brand’s tone. By keeping the layout clean and minimal while offering meaningful micro-interactions, this component improves user trust and makes the authentication flow feel more modern and engaging, all while remaining versatile enough to adapt to different applications.

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

## Install

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