BT-04ButtonsUpdated, October 16, 2026

Magnet Button

A call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor.

lucide-react

PROPay Button and more like it are in Kokonut UI Pro

Installation

Magnet Button is a free, open-source React component in the Kokonut UI Buttons collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/attract-button.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/attract-button

Usage

import AttractButton from "@/components/kokonutui/attract-button";

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

Dependencies

Built with React, Tailwind CSS and lucide-react.

Gradient Button

Layered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback and an optional icon.

Hold Button

Press and hold to confirm, with a fill that drains back on early release and a drawn check on completion.

Magnet Button

Installation

Usage

Dependencies

On this page