---
title: useMediaQuery
description: Subscribe to a CSS media query and re-render when it starts or stops matching.
icon: monitor
---

### Installation

```package-install
npx shadcn@latest add @redpanda/use-media-query
```

`useMediaQuery` returns a boolean that tracks whether a CSS media query currently matches, updating on change. Use it for responsive behavior that can't be expressed in CSS alone — swapping a `Dialog` for a `Drawer`, collapsing a layout, or toggling interaction patterns by viewport.

:::info
The value is `false` on the server and on first render, then syncs to the real match after mount. Guard any layout that would flash if it briefly assumes the query is unmatched.
:::

## Usage

```tsx showLineNumbers
import { useMediaQuery } from "@/hooks/use-media-query";

function Responsive() {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  return isDesktop ? <DesktopNav /> : <MobileNav />;
}
```

## API

### `useMediaQuery(query)`

| Parameter | Type     | Description                                          |
| --------- | -------- | ---------------------------------------------------- |
| `query`   | `string` | A CSS media query string, e.g. `(min-width: 768px)`. |

**Returns** `boolean` — whether the query currently matches.

## Related

For the common "is this a phone-sized viewport" check, prefer [`useIsMobile`](/docs/use-mobile), which wraps this with the design system's mobile breakpoint.