Hold To ConfirmA button that requires holding to confirm an action with fill or border progress animationbuttonsholdconfirmprogressanimationbutton PreviewCodeHold to confirmHold to confirmHold (border)Copy"use client" import { HoldToConfirm } from "@/components/vritti/hold-to-confirm"; export function HoldToConfirmExample() { return ( <div className="relative flex h-[200px] w-full items-center justify-center gap-4 overflow-hidden rounded-lg border"> <HoldToConfirm duration={2000} onConfirm={() => console.log("Confirmed!")} fillClassName="bg-green-500/30" confirmedChildren={<span>Confirmed!</span>} confirmedClassName="text-green-500" > Hold to confirm </HoldToConfirm> <HoldToConfirm duration={1500} animation="border" variant="outline" fillClassName="border-blue-500" onConfirm={() => console.log("Done!")} confirmedChildren={<span>Done!</span>} > Hold (border) </HoldToConfirm> </div> ); } Installation CLIManualpnpmnpmyarnbunpnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/hold-to-confirm"Copy Dependencies pnpmnpmyarnbunpnpm add motionCopy