Components/Magnetic Button

Magnetic Button

A modern magnetic button component with smooth magnetic hover effect.

import MagneticButton from "@/components/ui/magnetic-button"

export default function Example() {
  return <MagneticButton />
}

Installation

pnpm dlx shadcn@latest add https://www.roshansahu.site/r/magnetic-button.json

Import the component in your project pages.

import MagneticButton from "@/components/ui/magnetic-button"

export default function Example() {
  return <MagneticButton />
}

Configure your component behavior using these props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	"Magnetic Button"	The content inside the button.
`strength`	`number`	0.8	Magnetic pull strength factor.
`maxDistance`	`number`	100	Maximum distance in pixels for the magnetic effect.