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.
React useMousePosition Hook preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-mouse-position hook into my projectRelated 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.