Dock

Animated macOS-style dock component with magnification effects and smooth spring physics. A free React component for Next.js featuring TypeScript support and Tailwind CSS integration with shadcn/ui.

Framer Motion

Loading component...

'use client';import {  motion,  MotionValue,  useMotionValue,  useSpring,  useTransform,  type SpringOptions,  AnimatePresence,} from 'framer-motion';import {  Children,  cloneElement,  createContext,  useContext,  useEffect,  useMemo,  useRef,  useState,} from 'react';import { cn } from '@/lib/utils';const DOCK_HEIGHT = 128;const DEFAULT_MAGNIFICATION = 80;const DEFAULT_DISTANCE = 150;const DEFAULT_PANEL_HEIGHT = 64;type DockProps = {  children: React.ReactNode;  className?: string;  distance?: number;  panelHeight?: number;  magnification?: number;  spring?: SpringOptions;};type DockItemProps = {  className?: string;  children: React.ReactNode;};type DockLabelProps = {  className?: string;  children: React.ReactNode;};type DockIconProps = {  className?: string;  children: React.ReactNode;};type DocContextType = {  mouseX: MotionValue;  spring: SpringOptions;  magnification: number;  distance: number;};type DockProviderProps = {  children: React.ReactNode;  value: DocContextType;};const DockContext = createContext<DocContextType | undefined>(undefined);function DockProvider({ children, value }: DockProviderProps) {  return <DockContext.Provider value={value}>{children}</DockContext.Provider>;}function useDock() {  const context = useContext(DockContext);  if (!context) {    throw new Error('useDock must be used within an DockProvider');  }  return context;}function Dock({  children,  className,  spring = { mass: 0.1, stiffness: 150, damping: 12 },  magnification = DEFAULT_MAGNIFICATION,  distance = DEFAULT_DISTANCE,  panelHeight = DEFAULT_PANEL_HEIGHT,}: DockProps) {  const mouseX = useMotionValue(Infinity);  const isHovered = useMotionValue(0);  const maxHeight = useMemo(() => {    return Math.max(DOCK_HEIGHT, magnification + magnification / 2 + 4);  }, [magnification]);  const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]);  const height = useSpring(heightRow, spring);  return (    <motion.div      style={{        height: height,        scrollbarWidth: 'none',      }}      className='mx-2 flex max-w-full items-end overflow-x-auto'    >      <motion.div        onMouseMove={({ pageX }) => {          isHovered.set(1);          mouseX.set(pageX);        }}        onMouseLeave={() => {          isHovered.set(0);          mouseX.set(Infinity);        }}        className={cn(          'mx-auto flex w-fit gap-4 rounded-2xl bg-gray-50 px-4 dark:bg-neutral-900',          className        )}        style={{ height: panelHeight }}        role='toolbar'        aria-label='Application dock'      >        <DockProvider value={{ mouseX, spring, distance, magnification }}>          {children}        </DockProvider>      </motion.div>    </motion.div>  );}function DockItem({ children, className }: DockItemProps) {  const ref = useRef<HTMLDivElement>(null);  const { distance, magnification, mouseX, spring } = useDock();  const isHovered = useMotionValue(0);  const mouseDistance = useTransform(mouseX, (val) => {    const domRect = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };    return val - domRect.x - domRect.width / 2;  });  const widthTransform = useTransform(    mouseDistance,    [-distance, 0, distance],    [40, magnification, 40]  );  const width = useSpring(widthTransform, spring);  return (    <motion.div      ref={ref}      style={{ width }}      onHoverStart={() => isHovered.set(1)}      onHoverEnd={() => isHovered.set(0)}      onFocus={() => isHovered.set(1)}      onBlur={() => isHovered.set(0)}      className={cn(        'relative inline-flex items-center justify-center',        className      )}      tabIndex={0}      role='button'      aria-haspopup='true'    >      {Children.map(children, (child) =>        cloneElement(child as React.ReactElement<any>, { width, isHovered })      )}    </motion.div>  );}function DockLabel({ children, className, ...rest }: DockLabelProps) {  const restProps = rest as Record<string, unknown>;  const isHovered = restProps['isHovered'] as MotionValue<number>;  const [isVisible, setIsVisible] = useState(false);  useEffect(() => {    const unsubscribe = isHovered.on('change', (latest) => {      setIsVisible(latest === 1);    });    return () => unsubscribe();  }, [isHovered]);  return (    <AnimatePresence>      {isVisible && (        <motion.div          initial={{ opacity: 0, y: 0 }}          animate={{ opacity: 1, y: -10 }}          exit={{ opacity: 0, y: 0 }}          transition={{ duration: 0.2 }}          className={cn(            'absolute -top-6 left-1/2 w-fit whitespace-pre rounded-md border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-neutral-700 dark:border-neutral-900 dark:bg-neutral-800 dark:text-white',            className          )}          role='tooltip'          style={{ x: '-50%' }}        >          {children}        </motion.div>      )}    </AnimatePresence>  );}function DockIcon({ children, className, ...rest }: DockIconProps) {  const restProps = rest as Record<string, unknown>;  const width = restProps['width'] as MotionValue<number>;  const widthTransform = useTransform(width, (val) => val / 2);  return (    <motion.div      style={{ width: widthTransform }}      className={cn('flex items-center justify-center', className)}    >      {children}    </motion.div>  );}export { Dock, DockIcon, DockItem, DockLabel };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dock.json

npx shadcn@latest add https://www.shadcn.io/registry/dock.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dock.json

bunx shadcn@latest add https://www.shadcn.io/registry/dock.json

Features

Free open source React component built for Next.js applications with professional macOS dock functionality
Dynamic magnification effects using advanced Framer Motion spring physics with JavaScript-powered interactions
TypeScript-first development with comprehensive type definitions and IntelliSense support for reliable development
Tailwind CSS integration for seamless styling, dark mode support, and responsive design patterns
shadcn/ui compatibility following established design system patterns and component architecture
Interactive tooltip labels that appear smoothly on hover with animated positioning
Configurable spring animations with customizable stiffness, damping, and mass properties
Keyboard navigation support with full accessibility compliance and ARIA label implementation
Responsive overflow handling with horizontal scrolling for larger dock configurations
Customizable magnification distance and strength for precise user experience control
Performance optimized with efficient mouse tracking and minimized re-renders

Usage

The dock component consists of four main parts:

Dock - The main container that handles mouse tracking and animations
DockItem - Individual items within the dock that respond to magnification
DockIcon - The icon container that scales with the magnification effect
DockLabel - Tooltip labels that appear when hovering over items

import { Dock, DockIcon, DockItem, DockLabel } from '@/components/ui/dock';

<Dock>
  <DockItem>
    <DockLabel>Home</DockLabel>
    <DockIcon>
      <HomeIcon />
    </DockIcon>
  </DockItem>
</Dock>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The dock items
`className`	`string`	-	Additional CSS classes
`distance`	`number`	`150`	The distance for magnification effect
`panelHeight`	`number`	`64`	The height of the dock panel
`magnification`	`number`	`80`	The maximum magnification size
`spring`	`SpringOptions`	`{ mass: 0.1, stiffness: 150, damping: 12 }`	Framer Motion spring configuration

DockItem

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The item content (DockIcon and DockLabel)
`className`	`string`	-	Additional CSS classes

DockIcon

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The icon content
`className`	`string`	-	Additional CSS classes

DockLabel

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The label text content
`className`	`string`	-	Additional CSS classes for custom styling

Use Cases

This free open source React component is perfect for:

Next.js applications - Create professional desktop-like navigation with TypeScript integration and type safety
Dashboard interfaces - Build intuitive navigation bars with macOS-inspired design using shadcn/ui patterns
Portfolio websites - Showcase applications with sophisticated dock navigation using Tailwind CSS styling
Admin panels - Implement elegant application launchers with smooth animations and JavaScript interactions
Creative portfolios - Design unique navigation experiences that stand out with professional animation effects
SaaS applications - Create memorable user interfaces with dock-style navigation and open source flexibility
Design systems - Integrate premium navigation components into existing shadcn/ui component libraries

Technical Details

Magnification Algorithm

The dock uses advanced mouse proximity calculation with Framer Motion transforms:

Mouse tracking: Real-time cursor position monitoring with smooth coordinate updates
Distance calculation: Geometric distance computation between cursor and each dock item
Transform application: Smooth scaling transitions based on configurable distance thresholds

Performance Optimizations

Efficient re-rendering with React context optimization and minimal state updates
Framer Motion springs with optimized physics calculations for smooth 60fps animations
TypeScript-optimized component structure with proper memoization and prop validation
Tailwind CSS classes for consistent theming without runtime style computation

Accessibility

This open source component includes comprehensive accessibility features:

ARIA label implementation with proper toolbar and button role assignments for screen readers
Keyboard navigation support with tab order management and focus indication
React-compatible focus handling when used in interactive Next.js applications
High contrast compatibility with automatic dark mode adaptation using Tailwind CSS
Responsive design patterns that work across all device sizes and orientations

Dock

Reactdock

On this page