---
title: useHover
description: "`useHover` is a custom hook that detects whether the pointer has moved over or away from an element."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-hover
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-usehover--basic
---

```tsx
const { hovered, ref } = useHover()

return (
  <Box ref={ref} w="full" bg="red.500" p="md" rounded="md" color="white">
    {hovered ? "I am hovered" : "Put mouse over me please"}
  </Box>
)
```

## Usage

```tsx
import { useHover } from "@yamada-ui/react"
```

```tsx
import { useHover } from "@/components/ui"
```

```tsx
import { useHover } from "@workspaces/ui"
```

```tsx
const { hovered, ref } = useHover()
```