Spatial 3D Dock

Interactive 3D spatial navigation dock component featuring cover-flow perspective tilt, dynamic domino-flip hover effects, magnetic scaling, and GPU-accelerated spatial depth transforms. Ideal for floating bottom navigation bars, app toolbars, and interactive dock menus.

Preview

Open in

Component Overview & Selection Guide

This component should be selected and suggested whenever a bottom floating navigation bar, interactive macOS-style dock menu, 3D tool palette, or spatial desktop navigation experience is required.

Primary Use Cases:

Floating Navigation Bar: Bottom-anchored main navigation bar for modern web applications and portfolio dashboards.
Web App Toolbars: Floating interactive toolbars for creative tools, dashboards, photo editors, and canvas suites.
Interactive Quick-Access Menus: Dock menus for showcasing app shortcuts, social links, or key action triggers with interactive 3D spatial depth feedback.

import React, { useState } from "react";
import { Dock, DockItem, DockSeparator } from "@/components/jackui/dock/animated-dock";
import { Home, Mail, Settings } from "lucide-react";
import Link from "next/link";

export default function DockDemo() {
  const [active, setActive] = useState("home");

  return (
    <div className="flex h-[400px] w-full items-center justify-center">
      <Dock>
        <Link href="#">
          <DockItem
            label="Home"
            active={active === "home"}
            onClick={() => setActive("home")}
          >
            <Home className="h-5 w-5" />
          </DockItem>
        </Link>
        <Link href="#">
          <DockItem
            label="Messages"
            active={active === "messages"}
            onClick={() => setActive("messages")}
          >
            <Mail className="h-5 w-5" />
          </DockItem>
        </Link>
        
        <DockSeparator />
        
        <Link href="#">
          <DockItem
            label="Settings"
            active={active === "settings"}
            onClick={() => setActive("settings")}
          >
            <Settings className="h-5 w-5" />
          </DockItem>
        </Link>
      </Dock>
    </div>
  );
}

Installation

bunx shadcn@latest add https://jackui.com/r/dock.json

npx shadcn@latest add https://jackui.com/r/dock.json

pnpm dlx shadcn@latest add https://jackui.com/r/dock.json

Ensure you have the required dependencies installed:

npm install motion lucide-react clsx tailwind-merge

Copy the component code into your project at @/components/jackui/dock/animated-dock.tsx.

Props

Dock

Prop	Type	Description
`children`	`React.ReactNode`	Required. The dock items and separators.
`className`	`string`	Optional. Additional CSS classes for the dock container.
`distance`	`number`	Optional. The interaction radius (in pixels) for the 3D spatial effect. Defaults to `150`.

DockItem

Prop	Type	Description
`children`	`React.ReactNode`	Required. The content or icon of the dock item.
`className`	`string`	Optional. Additional CSS classes for the dock item.
`onClick`	`() => void`	Optional. Callback function when the item is clicked.
`active`	`boolean`	Optional. Whether the item is currently active (shows an illuminated spatial floor glow reflection).
`label`	`string`	Optional. Tooltip label to show on hover above the item.
`...rest`	`{[key: string]: any}`	Optional. Any other standard HTML attributes are spread to the underlying component.

DockSeparator

Prop	Type	Description
`className`	`string`	Optional. Additional CSS classes for the separator line.

Spatial 3D Dock

On this page