Auto-generate your docs

Dock

The Dock component creates a macOS-style dock with smooth spring animations and interactive item scaling. Each dock item features dynamic tooltips with rotation and translation effects based on mouse movement.

Installation

npm install @craftdotui/components

Import

import { Dock, DockItem } from "@craftdotui/components";

Usage

import { Dock, DockItem } from "@craftdotui/components";
import { Home, Search, Bell, User } from "lucide-react";

export default function Example() {
  return (
    <Dock>
      <DockItem icon={<Home />} label="Home" />
      <DockItem icon={<Search />} label="Search" />
      <DockItem icon={<Bell />} label="Notifications" />
      <DockItem icon={<User />} label="Profile" />
    </Dock>
  );
}

import { Dock, DockItem } from "@craftdotui/components";
import { Mail, Calendar, Camera, Settings } from "lucide-react";

export default function Example() {
  return (
    <Dock>
      <DockItem 
        icon={<Mail />} 
        label="Mail" 
        onClick={() => console.log("Mail clicked")}
      />
      <DockItem 
        icon={<Calendar />} 
        label="Calendar" 
        onClick={() => console.log("Calendar clicked")}
      />
      <DockItem 
        icon={<Camera />} 
        label="Photos" 
        onClick={() => console.log("Photos clicked")}
      />
      <DockItem 
        icon={<Settings />} 
        label="Settings" 
        onClick={() => console.log("Settings clicked")}
      />
    </Dock>
  );
}

import { Dock, DockItem } from "@craftdotui/components";
import { Music, Video, Image, File } from "lucide-react";

export default function Example() {
  return (
    <Dock className="bg-white/90 backdrop-blur-lg">
      <DockItem 
        icon={<Music className="text-pink-500" />} 
        label="Music"
        className="hover:bg-pink-100"
      />
      <DockItem 
        icon={<Video className="text-blue-500" />} 
        label="Videos"
        className="hover:bg-blue-100"
      />
      <DockItem 
        icon={<Image className="text-green-500" />} 
        label="Images"
        className="hover:bg-green-100"
      />
      <DockItem 
        icon={<File className="text-purple-500" />} 
        label="Files"
        className="hover:bg-purple-100"
      />
    </Dock>
  );
}

Components

Dock

The container component that wraps all dock items.

React.ReactNode

required

The dock items to display.

string

Additional CSS classes for custom styling.

DockItem

Individual items within the dock.

React.ReactNode

required

The icon to display in the dock item.

string

required

The label shown in the tooltip on hover.

() => void

Optional click handler function.

string

Additional CSS classes for the dock item.

Animation Details

Dock Container Animation

initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}

DockItem Spring Configuration

const springConfig = { 
  stiffness: 200, 
  damping: 10 
};

Hover Effects

Scale on Hover: Items scale to 1.2x with spring physics
Tap Scale: Items scale to 0.9x on click
Rotation: Tooltip rotates ±25° based on mouse position
Translation: Tooltip shifts ±10px horizontally

whileHover={{
  scale: 1.2,
  transition: { type: "spring", stiffness: 300, damping: 20 },
}}
whileTap={{ scale: 0.9 }}

initial={{ opacity: 0, y: 10, scale: 0.8 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.8 }}

The tooltip dynamically rotates and translates based on horizontal mouse movement within each dock item.

Examples

import { Dock, DockItem } from "@craftdotui/components";
import { Facebook, Twitter, Instagram, Linkedin, Youtube } from "lucide-react";

export default function SocialDock() {
  return (
    <Dock className="fixed bottom-8 left-1/2 -translate-x-1/2">
      <DockItem 
        icon={<Facebook className="w-6 h-6 text-blue-600" />} 
        label="Facebook"
        onClick={() => window.open("https://facebook.com")}
      />
      <DockItem 
        icon={<Twitter className="w-6 h-6 text-sky-500" />} 
        label="Twitter"
        onClick={() => window.open("https://twitter.com")}
      />
      <DockItem 
        icon={<Instagram className="w-6 h-6 text-pink-600" />} 
        label="Instagram"
        onClick={() => window.open("https://instagram.com")}
      />
      <DockItem 
        icon={<Linkedin className="w-6 h-6 text-blue-700" />} 
        label="LinkedIn"
        onClick={() => window.open("https://linkedin.com")}
      />
      <DockItem 
        icon={<Youtube className="w-6 h-6 text-red-600" />} 
        label="YouTube"
        onClick={() => window.open("https://youtube.com")}
      />
    </Dock>
  );
}

App Launcher

import { Dock, DockItem } from "@craftdotui/components";
import { Code, Terminal, Database, Cloud, Package } from "lucide-react";

export default function AppLauncher() {
  const apps = [
    { icon: Code, label: "VS Code", action: "code" },
    { icon: Terminal, label: "Terminal", action: "terminal" },
    { icon: Database, label: "Database", action: "db" },
    { icon: Cloud, label: "Cloud", action: "cloud" },
    { icon: Package, label: "Packages", action: "npm" },
  ];

  return (
    <Dock className="gap-6">
      {apps.map((app) => (
        <DockItem
          key={app.action}
          icon={<app.icon className="w-6 h-6" />}
          label={app.label}
          onClick={() => launchApp(app.action)}
        />
      ))}
    </Dock>
  );
}

Position the dock using fixed positioning (e.g., fixed bottom-4 left-1/2 -translate-x-1/2) for a persistent navigation bar.

Best Practices

Keep dock items between 4-8 for optimal usability
Use consistent icon sizes (typically 20-24px)
Provide clear, concise labels
Use semantic icon choices that match their function
Consider adding visual separators for grouped actions

Accessibility

Fully keyboard accessible
ARIA labels inherited from icon components
Supports screen readers
Respects reduced motion preferences

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Dock

Dock

Installation

Import

Usage

Components

Dock

DockItem

Animation Details

Dock Container Animation

DockItem Spring Configuration

Hover Effects

Tooltip Animation

Examples

App Launcher

Best Practices

Accessibility

​Dock

​Installation

​Import

​Usage

​Components

​Dock

​DockItem

​Animation Details

​Dock Container Animation

​DockItem Spring Configuration

​Hover Effects

​Tooltip Animation

​Examples

​Social Media Dock

​App Launcher

​Best Practices

​Accessibility

Dock

Installation

Import

Usage

Components

Dock

DockItem

Animation Details

Dock Container Animation

DockItem Spring Configuration

Hover Effects

Tooltip Animation

Examples

Social Media Dock

App Launcher

Best Practices

Accessibility