# ChecklistButton

> The ChecklistButton component is a highly flexible and reusable UI element built with shadcn UI. It allows users to mark actions as complete with a smooth label-to-check animation powered by Framer Motion. Designed for configurability, it supports custom labels, icons, done states, and even resettable toggling, making it useful for task management, approvals, subscriptions, or interactive workflows. Developers can easily attach callbacks (onDone) for backend actions, while its consistent styling ensures it blends seamlessly into any shadcn-based project. Combined with the demo page showcasing multiple configurations, this component provides both utility and polish, making it a valuable addition to modern web applications.

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

## Install

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