Dock

New

A macOS-style dock. Icons swell as the cursor passes and show a label on hover.

motionutils@soultel/use-reduced-motion-safe

Installation

$ pnpm dlx shadcn@latest add @soultel/dock

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/dock.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/dock.tsx.

Usage

example.tsx12 lines

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

export function Example() {
  return (
    <Dock>
      <DockItem label="Home"><Home /></DockItem>
      <DockItem label="Search"><Search /></DockItem>
      <DockItem label="Settings"><Settings /></DockItem>
    </Dock>
  )
}

Props

Prop	Type	Default	Description
size	number	40	Resting icon size in px.
magnification	number	64	Size under the cursor in px.
distance	number	140	Reach of the effect in px.
DockItem label	string	-	Tooltip and accessible name for each item.