Shadcn.io is not affiliated with official shadcn/ui
React useMousePosition Hook
React useMousePosition hook for real-time cursor tracking. Global and element-relative coordinates. TypeScript ready.
Track mouse position anywhere on the page or relative to an element. useMousePosition returns x/y coordinates plus a ref for element-relative tracking. Get global page coordinates and optional element-relative positions when you attach the ref. Updates on every mousemove event with page scroll accounted for. Perfect for custom cursors, tooltips that follow mouse, drawing apps, drag previews, or interactive hover effects. Uses useLayoutEffect for synchronous updates. SSR safe—returns zeros on server. Works with Next.js App Router and any React framework.
React useMousePosition Hook preview
Installation
Related Components
React useHover Hook
Track hover state on elements
React useEventListener Hook
Attach any event listener safely
React useWindowSize Hook
Track window dimensions
React useClickAnywhere Hook
Detect clicks anywhere on page
React useIntersectionObserver Hook
Track element visibility
React useResizeObserver Hook
Track element size changes
FAQ
Was this page helpful?
Sign in to leave feedback.