Floating Dock

float x dock

Floating navigation dock with animated hover states. From Magic UI.

dockfloatingnavmagicui

Code

dock-floating.tsx

"use client";
import { useState } from "react";

export function FloatingDock({ items }: { items: string[] }) {
  const [hovered, setHovered] = useState<number | null>(null);
  return (
    <div className="flex gap-2 rounded-full border border-border bg-surface/90 px-4 py-2.5 shadow-lg backdrop-blur-md">
      {items.map((icon, i) => (
        <button key={i} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
          className={`flex size-10 items-center justify-center rounded-full text-lg transition-all duration-200 ${hovered === i ? "scale-125 bg-muted" : ""}`}>
          {icon}
        </button>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Floating Dock component and wire it to my accent.”