STARCK UI

Morphing Download Icon

An Apple-to-download icon transition for Mac download calls to action.

Used inSessionWatcher ↗

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add https://ui.starck.studio/r/morphing-download-icon.json

Usage

const [hovered, setHovered] = useState(false)

<button
  type="button"
  onMouseEnter={() => setHovered(true)}
  onMouseLeave={() => setHovered(false)}
  onFocus={() => setHovered(true)}
  onBlur={() => setHovered(false)}
  className="inline-flex items-center gap-2 rounded-full bg-zinc-950 px-5 py-3 text-sm font-semibold text-white shadow-lg"
>
  <MorphingDownloadIcon hover={hovered} />
  Download for Mac
</button>