Components
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.
"use client"
import SwipeToConfirmButton from "@/components/ui/swipe-to-confirm-button"
export default function SwipeToConfirmDemo() {
const handleConfirm = () => alert("Payment Confirmed!")
return (
<div className="p-6 flex flex-col gap-6 items-center">
<SwipeToConfirmButton onConfirm={handleConfirm} />
<SwipeToConfirmButton
label="Swipe to Submit"
width={350}
height={60}
onConfirm={() => console.log("Form Submitted!")}
/>
<SwipeToConfirmButton
label="Slide to Unlock"
width={300}
height={50}
onConfirm={() => console.log("Unlocked!")}
/>
</div>
)
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.