Shadcn.io is not affiliated with official shadcn/ui
React useHover Hook
React useHover hook to track mouse hover state on any element. Returns boolean, uses ref, auto-cleanup. TypeScript ready.
React useHover Hook preview
Detect hover state on any React element with a single hook. useHover takes a ref and returns true when the mouse is over the element. Uses mouseenter/mouseleave events internally—no CSS required, works with any element type. Auto-cleans up listeners on unmount. Perfect for hover cards, tooltips, interactive buttons, image galleries, or any UI that responds to mouse position. TypeScript generic for element types. SSR safe—only attaches listeners client-side. 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-hover hook into my projectRelated Components
React useMousePosition Hook
Track mouse coordinates
React useEventListener Hook
Attach any event listener safely
React useOnClickOutside Hook
Detect clicks outside element
React useClickAnywhere Hook
Detect clicks anywhere on page
React useBoolean Hook
Boolean state with toggle helpers
React useIntersectionObserver Hook
Track element visibility
FAQ
Was this page helpful?
Sign in to leave feedback.
useEventListener
React useEventListener hook for declarative DOM event handling. Auto-cleanup, TypeScript event maps, supports window/document/element refs.
useIntersectionObserver
React useIntersectionObserver hook for viewport visibility detection. Lazy loading, infinite scroll, animations. TypeScript ready.