Magic Dock

MacOS-style React dock with smooth animation and customizable magnification.

The Dock will show on bottom of the page

Installation

npx scrollx-ui@latest add magicdock

Usage

Basic Usage

import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Settings as SettingsIcon } from "lucide-react";
 
const dockItems = [
  {
    id: 1,
    icon: <HomeIcon size={24} />,
    label: "Home",
    description: "Go to homepage",
    onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  },
  {
    id: 2,
    icon: <SettingsIcon size={24} />,
    label: "Settings",
    description: "Customize options",
    onClick: () => console.log("Settings clicked"),
  },
];
 
function App() {
  return (
    <div className="relative">
      <StylishDock
        items={dockItems}
        distance={150}
        panelHeight={64}
        baseItemSize={50}
        magnification={70}
        variant="default"
      />
    </div>
  );
}

With NextRouter

import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Docs as DocsIcon } from "lucide-react";
import { useRouter } from "next/navigation";
 
const dockItems = [
  {
    id: 1,
    icon: <HomeIcon size={24} />,
    label: "Home",
    description: "Go to homepage",
    onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  },
  {
    id: 2,
    icon: <DocsIcon size={24} />,
    label: "Docs",
    description: "Read documentation",
    onClick: () => router.push("/docs"),
  },
];
 
function App() {
  return (
    <div className="relative">
      <StylishDock
        items={dockItems}
        distance={150}
        panelHeight={64}
        baseItemSize={50}
        magnification={70}
        variant="tooltip"
      />
    </div>
  );
}

Custom Styling Variants

  // Default variant
<MagicDock items={dockItems} variant="default" />
 
// Gradient variant
<MagicDock items={dockItems} variant="gradient" />
 
// Tooltip variant with custom magnification
<MagicDock 
  items={dockItems} 
  variant="tooltip" 
  magnification={90}
  baseItemSize={60}
/>

API Reference

MagicDock

The MagicDock component provides a customizable, animated dock.

Props

PropertyTypeDefaultDescription
itemsDockItemData[]required
Array of dock items with id, icon, label, description, and onClick.
classNamestring
Custom classes for the dock container.
distancenumber150
Distance used for magnification effect.
panelHeightnumber64
Fixed height of the dock panel.
baseItemSizenumber50
Base size of each dock item.
dockHeightnumber256
Max height of the expanded dock.
magnificationnumber70
Max size increase on item hover.
spring{ mass: number; stiffness: number; damping: number }{ mass: 0.1, stiffness: 150, damping: 12 }
Spring animation config for item movement.
variant"default" | "gradient" | "tooltip""default"
Visual style of the dock.

Built withby Ahdeetai.