useMediaQuery

Subscribe to a CSS media query and re-render when it starts or stops matching.

Installation

npx shadcn@latest add @redpanda/use-media-query

pnpm dlx shadcn@latest add @redpanda/use-media-query

yarn dlx shadcn@latest add @redpanda/use-media-query

bunx shadcn@latest add @redpanda/use-media-query

nubx shadcn@latest add @redpanda/use-media-query

aube dlx 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.

Usage

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

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

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

API

useMediaQuery(query)

Returns boolean — whether the query currently matches.

Related

For the common “is this a phone-sized viewport” check, prefer useIsMobile, which wraps this with the design system’s mobile breakpoint.