build69
Sign inGet API key
build69  /  Components  /  Foundations  /  useMediaQuery

useMediaQuery

v1.0.1Updated 21 Jul 2026

SSR-safe React hook wrapping window.matchMedia. Accepts a CSS media query string and returns whether it currently matches, re-rendering on change. Ships with breakpoint helper (useBreakpoint), pointer-type helper (useIsT

View source← Back to catalog

Preview

Live · 5 stories
Responsive LayoutOpen ↗
▸Why this is recommendedhookmedia-queryresponsivebreakpoint+3

useMediaQuery — responsive layout.

Recommended for+14
  • ✓Conditional render by viewport
  • ✓Choosing component variants per breakpoint
  • ✓Respecting prefers-reduced-motion / prefers-color-scheme
  • ✓Touch-vs-mouse UI affordances
Tags+6
hookmedia-queryresponsivebreakpointssrutilitylayout
Features+4
  • SSR-safe (no window access during render)
  • useMediaQuery(query) returns boolean
  • useBreakpoint(bp) — sm / md / lg / xl / 2xl tailwind breakpoints
  • useIsTouch() — coarse pointer device detection
  • usePrefersDark() — color-scheme: dark
  • usePrefersReducedMotion() — reduced-motion preference
  • Safari < 14 addListener fallback
Not recommended for−2
  • ✕CSS-only responsive styling (prefer tailwind utilities)
  • ✕One-time read at mount (use window.matchMedia directly)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "useMediaQuery" })

Usage

import { useMediaQuery, useBreakpoint, useIsTouch, usePrefersDark } from '@/lib/use-media-query';

const isMd = useBreakpoint('md');
const isDark = usePrefersDark();
const isTouch = useIsTouch();
const isWide = useMediaQuery('(min-width: 1280px)');

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
query

CSS media query (e.g. "(min-width: 768px)")

stringyes
options.defaultValue

SSR / pre-mount fallback (default false)

boolean—

Related

Platform docsAll componentsSource files