Dock

A dock component with animated icons that respond to mouse movement. It arranges icons in a row and scales them based on position. Use it to create a macOS-style dock interface in a React app.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/dock

npx layro-cli add @magicuidesign/dock

npx layro-cli add @magicuidesign/dock

bunx layro-cli add @magicuidesign/dock

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { useRef, type PropsWithChildren } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import {
  motion,
  MotionValue,
  useMotionValue,
  useSpring,
  useTransform,
} from "motion/react"
import type { MotionProps } from "motion/react"

import { cn } from "@/lib/utils"