Shadcn.io is not affiliated with official shadcn/ui
React useMediaQuery Hook
React useMediaQuery hook for responsive breakpoints and CSS media queries. Live updates, SSR safe, TypeScript ready.
React useMediaQuery Hook preview
Respond to CSS media queries in React. useMediaQuery takes a query string and returns true when it matches, false otherwise. Updates live when viewport changes or system preferences update. Uses matchMedia API with Safari legacy support. Configurable default value for SSR. Perfect for responsive layouts, dark mode detection, reduced motion, print styles, or any CSS media feature. No CSS-in-JS required—works with any styling approach. SSR safe with defaultValue option. Works with Next.js App Router, Tailwind CSS breakpoints, 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-media-query hook into my projectRelated Components
React useWindowSize Hook
Track window dimensions
React useDarkMode Hook
Dark mode with persistence
React useScreen Hook
Full screen object access
React useIsClient Hook
Check if running on client
React useEventListener Hook
Attach any event listener safely
React useIsomorphicLayoutEffect Hook
SSR-safe useLayoutEffect
FAQ
Was this page helpful?
Sign in to leave feedback.