useHover

Track mouse hover state on DOM elements with precise event detection. Perfect for React applications requiring hover interactions with Next.js integration and TypeScript support.

Loading component...

"use client";import React, { useRef } from 'react';import { useHover } from '@/components/ui/shadcn-io/use-hover';export default function UseHoverDemo() {  const hoverRef = useRef<HTMLDivElement>(null);  const isHover = useHover(hoverRef as React.RefObject<HTMLElement>);  return (    <div className="flex flex-col items-center justify-center min-h-[300px] p-8 space-y-6">      {/* Status Display */}      <div className="text-center space-y-2">        <h3 className="text-lg font-semibold">Hover Detection</h3>        <div className={`px-6 py-3 rounded-lg text-lg font-medium transition-colors ${          isHover             ? "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"             : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"        }`}>          {isHover ? '🎯 Hovering' : '👋 Not Hovering'}        </div>      </div>      {/* Hover Target */}      <div         ref={hoverRef}        className={`          w-48 h-32 border-2 border-dashed rounded-lg           flex items-center justify-center text-center          cursor-pointer transition-all duration-200          ${isHover             ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20 scale-105'             : 'border-gray-300 bg-gray-50 dark:bg-gray-800 hover:border-gray-400'          }        `}      >        <div>          <div className="text-2xl mb-2">{isHover ? '😊' : '😴'}</div>          <div className="text-sm font-medium">            {isHover ? 'You\'re hovering!' : 'Hover over me'}          </div>        </div>      </div>      {/* State Info */}      <div className="text-center space-y-2">        <div className="text-sm text-muted-foreground">          Hook returns: <code className="bg-muted px-2 py-1 rounded text-xs">            {isHover ? 'true' : 'false'}          </code>        </div>        <div className="text-xs text-muted-foreground max-w-md">          Move your cursor over the dashed area to see the hover state change        </div>      </div>    </div>  );}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

npx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

Features

Precise hover detection with mouseenter and mouseleave event handling
TypeScript support with generic element types and complete type definitions
Ref-based targeting allowing hover tracking on any DOM element
Performance optimized using event delegation through useEventListener
shadcn/ui integration compatible with Tailwind CSS hover utilities
Zero dependencies beyond the internal useEventListener hook

Examples

Multiple Element Tracking

Loading component...

"use client";import * as React from "react";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useHover } from "@/components/ui/shadcn-io/use-hover";export default function UseHoverAdvancedDemo() {  const cardRef = React.useRef<HTMLDivElement>(null);  const buttonRef = React.useRef<HTMLButtonElement>(null);  const imageRef = React.useRef<HTMLDivElement>(null);    const cardHover = useHover(cardRef as React.RefObject<HTMLElement>);  const buttonHover = useHover(buttonRef as React.RefObject<HTMLElement>);  const imageHover = useHover(imageRef as React.RefObject<HTMLElement>);    const [hoverCount, setHoverCount] = React.useState(0);  React.useEffect(() => {    if (cardHover || buttonHover || imageHover) {      setHoverCount(prev => prev + 1);    }  }, [cardHover, buttonHover, imageHover]);  return (    <div className="space-y-3 p-4 max-w-sm mx-auto">      {/* Multi-element Tracking */}      <div className="space-y-2">        <div className="flex items-center justify-between">          <Label className="text-sm font-medium">Multiple Elements</Label>          <Badge variant="secondary" className="text-xs">            {hoverCount} hovers          </Badge>        </div>                <div className="space-y-2">          {/* Hover Card */}          <div             ref={cardRef}            className={`p-3 rounded border-2 transition-all cursor-pointer ${              cardHover                 ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20'                 : 'border-gray-200 bg-gray-50 dark:bg-gray-800'            }`}          >            <div className="flex items-center justify-between">              <span className="text-sm">Interactive Card</span>              <span className="text-xs">{cardHover ? '🎯' : '📄'}</span>            </div>          </div>          {/* Hover Button */}          <Button            ref={buttonRef}            variant={buttonHover ? "default" : "outline"}            size="sm"            className="w-full justify-between text-sm"          >            <span>Hover Button</span>            <span>{buttonHover ? '🎯' : '🔘'}</span>          </Button>          {/* Hover Image */}          <div             ref={imageRef}            className={`h-16 rounded border-2 border-dashed transition-all cursor-pointer flex items-center justify-center ${              imageHover                 ? 'border-green-400 bg-green-50 dark:bg-green-900/20'                 : 'border-gray-300 bg-gray-100 dark:bg-gray-700'            }`}          >            <span className="text-xs text-muted-foreground">              {imageHover ? '🖼️ Image Hovered' : '🖼️ Hover for Image'}            </span>          </div>        </div>      </div>      {/* Status Grid */}      <div className="space-y-2">        <Label className="text-sm font-medium">Hover States</Label>        <div className="grid grid-cols-3 gap-1 text-xs">          <div className={`p-2 rounded text-center ${            cardHover ? 'bg-blue-100 dark:bg-blue-900' : 'bg-muted'          }`}>            Card            <div className="text-[10px] text-muted-foreground">              {cardHover ? 'ON' : 'OFF'}            </div>          </div>          <div className={`p-2 rounded text-center ${            buttonHover ? 'bg-blue-100 dark:bg-blue-900' : 'bg-muted'          }`}>            Button            <div className="text-[10px] text-muted-foreground">              {buttonHover ? 'ON' : 'OFF'}            </div>          </div>          <div className={`p-2 rounded text-center ${            imageHover ? 'bg-green-100 dark:bg-green-900' : 'bg-muted'          }`}>            Image            <div className="text-[10px] text-muted-foreground">              {imageHover ? 'ON' : 'OFF'}            </div>          </div>        </div>      </div>      {/* Active States Summary */}      <div className="space-y-2">        <Label className="text-sm font-medium">Summary</Label>        <div className="p-2 bg-muted rounded text-xs space-y-1">          <div className="flex justify-between">            <span>Active:</span>            <span>{[cardHover, buttonHover, imageHover].filter(Boolean).length}/3</span>          </div>          <div className="flex justify-between">            <span>Total hovers:</span>            <span>{hoverCount}</span>          </div>        </div>      </div>      {/* Instructions */}      <div className="text-xs text-muted-foreground text-center">        Hover over different elements to track multiple states      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Track hover states across multiple elements simultaneously with individual state management.

Use Cases

This free open source React component works well for:

Interactive tooltips - Show/hide content on hover with Next.js and TypeScript
Button states - Visual feedback for hover interactions using Tailwind CSS
Image galleries - Preview functionality triggered by mouse hover
Navigation menus - Dropdown and submenu visibility with shadcn/ui components

API Reference

Parameter	Type	Description
`elementRef`	`RefObject<T>`	required - Ref object for the target DOM element

Return Value

Type	Description
`boolean`	Current hover state - true when hovering, false otherwise

Type Parameters

Parameter	Type	Default	Description
`T`	`extends HTMLElement`	`HTMLElement`	DOM element type for TypeScript inference

Implementation Notes

Uses mouseenter/mouseleave for precise hover detection without bubbling
Requires a valid ref object pointing to a DOM element
Returns false immediately if ref is null or undefined
Compatible with React.useRef and React.createRef patterns
Integrates with useEventListener for optimal performance

useHover

Reactbutton

Reactbadge

Reactlabel

On this page