devigner.ComponentsMagnetic Button

NewAnimation ยท added Sep 14

Magnetic Button

Leans toward your cursor before you reach it, then lets go with a wobble.

Install it in one line

$npx devignerui add magnetic-button

Writes components/ui/magnetic-button.tsx and lists what it needs.

First time here

$npx devignerui init

Or by hand

  1. Needs React 18+ and Tailwind CSS v4.

  2. Install the dependencies.

    $npm i cn gsap motion devignerui
  3. Paste the source from into components/ui/magnetic-button.tsx.

Usage

import { MagneticButton } from "@/components/ui/magnetic-button";

export function Example() {
  return (
    <MagneticButton
      strength={3}
      labelStrength={4}
      field={40}
      tilt={15}
      className="bg-linear-to-b from-brand-secondary to-brand text-brand-foreground uppercase"
    >
      Get started
    </MagneticButton>
  );
}

Custom composition

<MagneticButton className="rounded-none">Continue</MagneticButton>

Every prop

children-
ReactNode

Button content.

href-
string

Renders a link.

strength3
number

Cursor pull strength.

labelStrength6
number

Label parallax strength.

field40
number

Magnetic field radius.

tilt15
number

Label tilt.

className-
string

Button classes.

disabledfalse
boolean

Disables interaction.

Notes

It's your code now. Edit it however you like. If something breaks in your setup, the registry has the latest version.

Some of these designs take cues from interfaces we've admired around the web. If one started as your idea and you'd like credit, message us on X @devignerui and we'll add it.