Components

Magnetic Button

A shadcn-compatible button that subtly follows the cursor using spring-based motion.

interactivemotioncursoranimation

Installation

$npx shadcn@latest add https://ui.navdeepsingh.dev/r/magnetic-button.json

API Reference

PropTypeDefaultDescription
movementnumber6How far (in px) the button drifts toward the cursor on hover.
childrenReact.ReactNode-Button content.
classNamestring-Classes merged onto the underlying button.
...propsReact.ComponentProps<typeof Button>-All native <button> props via the shadcn Button (e.g. variant, size, disabled, onClick), except 'asChild'.

Customization

  • Pass className to restyle the component. Classes are merged with cn, so your utilities win.
  • Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
  • Tune behavior with the props in the API reference above, for example movement.