strengthpill travel3

labelStrengthlabel travel4

fieldpx40

tiltdeg15

Show field

Magnetic Button

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

Install it in one line

Available in v1.0.0

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

Needs React 18 or 19 and Tailwind CSS v4.
Install the dependencies.
npm i cn gsap motion devignerui
Paste the source from into components/ui/magnetic-button.tsx.

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 or in the Discord and we'll add it.

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>

External link with a softer pull

Lower strength for a subtle lean, and pass href to render a link.

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

export function DocsLink() {
  return (
    <MagneticButton href="https://github.com" target="_blank" strength={2} labelStrength={3}>
      View on GitHub
    </MagneticButton>
  );
}

Every prop

children-

ReactNode

Button content.

href-

string

Renders a link.

strength3

number

Cursor pull strength.

labelStrength4

number

Label parallax strength.

field40

number

Magnetic field radius.

tilt15

number

Label tilt.

className-

string

Button classes.

disabledfalse

boolean

Disables interaction.

How to use it

The live demo is a gradient Get started button. Move the pointer near it and the pill leans toward the cursor while the label drifts and tilts a little further, then both spring back with a wobble when the pointer leaves the field.

When to use it

One primary call to action per view, such as a hero or pricing button, where a bit of playful physics earns attention.
A link that should feel like a button, via href, including external links (target="_blank" gets rel="noopener noreferrer" added for you).

When to reach for something else

Dense toolbars, forms or lists of buttons: several magnetic fields next to each other compete for the cursor.
Destructive actions. Use Delete Button, which asks for confirmation.

Keyboard

Tab: Focuses the button or link. A focus ring is drawn on the visible pill.
Enter / Space: Activates it, like any native button (Enter only for the link form).

Accessibility

Renders a real <button type="button"> or <a>, so screen readers announce the right role and the label is the children you pass.
The magnetic field is invisible padding cancelled by a negative margin: the hit area grows without moving the layout.
Disabled links get aria-disabled, lose their href and are removed from the tab order.
Honors prefers-reduced-motion and an ancestor <MotionConfig reducedMotion="always">, so an in-app motion switch works too.

Theming

className styles the visible pill, not the invisible field, so backgrounds, rounding and padding go there.
Defaults use bg-secondary and text-foreground, and the focus ring uses ring-ring.
strength and labelStrength are 0 to 10 dials. A different value for each gives the parallax between pill and label.

Edge cases

The pull only runs on devices with a fine pointer that can hover, so touch screens get a plain button.
field is the radius in px of the attraction zone. Set it to 0 to turn the magnet off while keeping the button.
The field's negative margin can overlap nearby elements. Give the button enough room, or lower field, when it sits inside a tight container.

Troubleshooting

The button does not move toward the cursor.

Check that reduced motion is off in the OS and in any MotionConfig above it, that the device has a mouse or trackpad, that disabled is not set, and that field is above 0. GSAP must be installed (npm i gsap).

Clicks near the button hit it instead of the element next to it.

That is the magnetic field, which extends field px (40 by default) around the pill. Lower field or add spacing around the button.

The component renders with no background or the wrong colors.

Colors use the standard shadcn/ui tokens only (background, foreground, primary, secondary, muted, accent, border, input, ring, destructive), so a project set up with shadcn/ui needs nothing extra and the component follows its theme, dark mode included. Without shadcn/ui, define those CSS variables for :root and .dark and map them in your Tailwind v4 @theme, or run npx shadcn init.

Stuck on something else? Ask in the Discord.