Dock

Navigation 1

About

macOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dock to your project and fits it to your theme.

Code

How Dock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { Dock, DockItem, DockLabel } from '@/components/ui/dock';
import { Calendar, Folder, Home, Mail, Music, Settings } from 'lucide-react';

export default function DockDemo() {
  const APPS = [
    { key: 'home', label: 'Home', icon: Home },
    { key: 'files', label: 'Files', icon: Folder },
    { key: 'mail', label: 'Mail', icon: Mail },
    {
      key: 'calendar',
      label: 'Calendar',
      icon: Calendar,
    },
    { key: 'music', label: 'Music', icon: Music },
    {
      key: 'settings',
      label: 'Settings',
      icon: Settings,
    },
  ];

  return (
    <div className="flex w-full max-w-xl items-end justify-center pt-12">
      <Dock>
        {APPS.map((app) => (
          <DockItem key={app.key} aria-label={app.label}>
            <DockLabel>{app.label}</DockLabel>
            <app.icon />
          </DockItem>
        ))}
      </Dock>
    </div>
  );
}