# Magnify Dock
> macOS-style dock whose icons magnify as the pointer approaches.
- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/magnify-dock
- Site: Atelier UI (https://chromotion.dev)
## Install
```bash
npx shadcn@latest add https://chromotion.dev/r/magnify-dock.json
```
Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.
## Dependencies
```bash
npm install lucide-react
```
## Usage
```tsx title="components/magnify-dock-demo.tsx"
"use client"
import { Calendar, Camera, Folder, House, Mail, MessageSquare, Music, Settings } from "lucide-react"
import { MagnifyDock } from "@/components/magnify-dock"
export default function MagnifyDockDemo() {
return (
)
}
```
## Source
```tsx title="components/magnify-dock.tsx"
"use client"
import * as React from "react"
import type { LucideIcon } from "lucide-react"
import { cn } from "@/lib/utils"
export type DockItem = {
label: string
icon: LucideIcon
href?: string
onClick?: () => void
active?: boolean
}
export interface MagnifyDockProps extends React.ComponentProps<"nav"> {
items: DockItem[]
/** Resting icon size in px */
baseSize?: number
/** Icon size directly under the pointer, in px */
maxSize?: number
/** Distance in px over which magnification fades out */
range?: number
}
export function MagnifyDock({
items,
baseSize = 44,
maxSize = 72,
range = 140,
className,
...props
}: MagnifyDockProps) {
const [sizes, setSizes] = React.useState(null)
const refs = React.useRef<(HTMLElement | null)[]>([])
// Measure in the event handler so render only reads state.
const magnify = (pointerX: number) => {
setSizes(
items.map((_, i) => {
const el = refs.current[i]
if (!el) return baseSize
const rect = el.getBoundingClientRect()
const distance = Math.abs(pointerX - (rect.left + rect.width / 2))
const t = Math.max(0, 1 - distance / range)
return baseSize + (maxSize - baseSize) * (1 - Math.cos((t * Math.PI) / 2))
})
)
}
return (
)
}
```