Get Started

Follow these steps to integrate the macOS Dock into your project.

1CLI Installation

Run this command

npx "@intrface.in/macos-dock"

2Manual Installation

1. Install dependencies:

npm i framer-motion lucide-react

2. Copy the component code into components/macos-dock.tsx

3Usage Example

You can use the component like this in your project:

App.tsx

import { Dock } from "@/components/macos-dock";

export default function App() {
  return (
    <div className="relative min-h-screen w-full bg-[#030303]">
      {/* Your application content here */}
      
      <div className="fixed bottom-10 left-0 right-0 z-50 flex justify-center">
        <Dock />
      </div>
    </div>
  );
}