Dock

Renders a floating app dock with interactive elements. It adjusts item sizes on hover and displays tooltips. Use for modern app interfaces or toolbars needing dynamic, responsive layouts.

byJulien Thibeaut from Motion Primitives

Installation

terminal

pnpm dlx layro-cli add @ibelick/dock

npx layro-cli add @ibelick/dock

npx layro-cli add @ibelick/dock

bunx layro-cli add @ibelick/dock

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

Code

Demo

'use client';

import {
  motion,
  MotionValue,
  useMotionValue,
  useSpring,
  useTransform,
  type SpringOptions,
  AnimatePresence,
} from 'motion/react';
import {
  Children,
  cloneElement,