An interactive button component that evades the cursor with smooth animations and physics-based movement
"use client";import { Button } from "@/components/foliokit/catchme-button";const CatchButtonDemo = () => { return ( <div className="flex items-center justify-center"> <Button evade variant="default" size="lg"> Catch me! 🏃♂️ </Button> </div> );};export default CatchButtonDemo;pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/catchme-button.jsonnpx shadcn@latest add https://folio-kit.vercel.app/r/catchme-button.jsonyarn shadcn@latest add https://folio-kit.vercel.app/r/catchme-button.jsonbunx shadcn@latest add https://folio-kit.vercel.app/r/catchme-button.jsonimport { Button } from "@/components/ui/catchme-button";<Button evade evadeDistance={180} evadeThreshold={150}>
Try to Click Me!
</Button>"use client";import { Button } from "@/components/foliokit/catchme-button";const CatchButtonDemo = () => { return ( <div className="flex items-center justify-center"> <Button evade variant="default" size="lg"> Catch me! 🏃♂️ </Button> </div> );};export default CatchButtonDemo;// registry/demo/evade-button-with-icon/index.tsx"use client";import { Button } from "@/components/foliokit/catchme-button";import { Heart, Star, Zap, Rocket } from "lucide-react";const EvadeButtonWithIcon = () => { return ( <div className="flex flex-wrap items-center justify-center gap-4 min-h-[200px]"> <Button evade variant="default"> <Heart /> Like </Button> <Button evade variant="secondary"> <Star /> Favorite </Button> <Button evade variant="outline"> <Zap /> Quick Action </Button> <Button evade variant="destructive"> <Rocket /> Launch </Button> <Button evade size="icon" variant="outline"> <Heart /> </Button> <Button evade size="icon-lg" variant="default"> <Star /> </Button> </div> );};export default EvadeButtonWithIcon;// registry/demo/evade-button-sizes/index.tsx"use client";import { Button } from "@/components/foliokit/catchme-button";const EvadeButtonSizes = () => { return ( <div className="flex flex-wrap items-center justify-center gap-4 min-h-[200px]"> <Button evade size="xs" variant="outline"> Extra Small </Button> <Button evade size="sm" variant="outline"> Small </Button> <Button evade size="default" variant="outline"> Default </Button> <Button evade size="lg" variant="outline"> Large </Button> </div> );};export default EvadeButtonSizes;// registry/demo/evade-button-variants/index.tsx"use client";import { Button } from "@/components/foliokit/catchme-button";const EvadeButtonVariants = () => { return ( <div className="flex flex-wrap items-center justify-center gap-4 min-h-[200px]"> <Button evade variant="default"> Default </Button> <Button evade variant="destructive"> Destructive </Button> <Button evade variant="outline"> Outline </Button> <Button evade variant="secondary"> Secondary </Button> <Button evade variant="ghost"> Ghost </Button> <Button evade variant="link"> Link </Button> </div> );};export default EvadeButtonVariants;Prop
Type
Radix UI Slot API Reference