Viora LogoViora UI
Login

Magnetic Button

Button that follows your cursor with magnetic effect - dynamic interaction.

magnetic-button.tsx
Loading source code...

Installation

npx viora-ui@latest add magnetic-button
pnpm dlx viora-ui@latest add magnetic-button
npx viora-ui@latest add magnetic-button
bunx viora-ui@latest add magnetic-button

Step 1: Install Dependencies

npm install framer-motion clsx tailwind-merge lucide-react

Step 2: Copy the Source Code Copy the component code into your components/viora-ui/magnetic-button.tsx file.

API Reference

MagneticButton Props

PropTypeDefaultDescription
classNamestring""Additional CSS classes
childrenReactNode-Component children

Built by Otis

Last updated: 10/12/2026