Skip to main content
An implementation of the macOS dock using React, Tailwind CSS, and Framer Motion with smooth magnification animations.

Installation

npx shadcn@latest add @magicui/dock

Usage

import { Dock, DockIcon } from "@/components/ui/dock"
import { Home, Search, Settings } from "lucide-react"

export default function Example() {
  return (
    <Dock>
      <DockIcon>
        <Home />
      </DockIcon>
      <DockIcon>
        <Settings />
      </DockIcon>
      <DockIcon>
        <Search />
      </DockIcon>
    </Dock>
  )
}

Dock Props

iconSize
number
default:"40"
Size of the dock icons in pixels
iconMagnification
number
default:"60"
Maximum size of icons when magnified
iconDistance
number
default:"140"
Distance from cursor at which magnification begins
direction
'top' | 'middle' | 'bottom'
default:"'middle'"
Vertical alignment of dock items
disableMagnification
boolean
default:"false"
Disable magnification effect on hover
className
string
Additional CSS classes to apply

DockIcon Props

size
number
default:"40"
Icon size (inherited from Dock if not specified)
magnification
number
default:"60"
Magnification level (inherited from Dock if not specified)
distance
number
default:"140"
Magnification distance (inherited from Dock if not specified)
className
string
Additional CSS classes to apply

Examples

Custom Direction

Align icons to the top or bottom of the dock.

Custom Magnification

Adjust the magnification strength and distance.

Credits

Build docs developers (and LLMs) love