useIsMobile

Detects whether the viewport matches a mobile max-width media query.

Desktop viewport

Resize below ~1024px (63.999rem) to see the value flip.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/use-mobile.json

Usage

Returns true when the viewport matches (max-width: 63.999rem) (~1024px). The first client render resolves after mount; until then the returned value is false.

import { useIsMobile } from "@/hooks/use-mobile";

export function Example() {
  const isMobile = useIsMobile();

  return <p>{isMobile ? "Mobile layout" : "Desktop layout"}</p>;
}

Useful for swapping layouts (for example sidebar sheet vs fixed rail) without CSS-only solutions.