# Swipe To Confirm Button

> The SwipeToConfirmButton component is a fully theme-aware, mobile-style swipe button built using shadcn UI and Tailwind CSS. Instead of a traditional click, users swipe the button to confirm an action, making it ideal for sensitive operations like payments, form submissions, or unlocking features. The component dynamically adapts to light and dark themes, with background, text, borders, and hover states adjusting automatically for optimal readability. The swiped portion of the button also visually reflects progress with a smooth animated fill. With configurable width, height, and callbacks, it provides both an interactive user experience and a polished, modern design that seamlessly fits into any shadcn UI-based project.

- 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/swipe-to-confirm-button

## Install

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