Hooks
useIsMobile
Detect whether the viewport is below the mobile breakpoint (768px).
Installation
useIsMobile returns true when the viewport width is under the design system's mobile breakpoint (768px). It's the opinionated shortcut behind responsive primitives like Sidebar — use it when you want the same breakpoint everywhere without repeating a media query string.
Returns false until the first client-side measurement resolves after mount, so it is SSR-safe.
Usage
import { useIsMobile } from "@/hooks/use-mobile";
function Nav() {
const isMobile = useIsMobile();
return isMobile ? <MobileMenu /> : <DesktopMenu />;
}API
useIsMobile()
Takes no arguments.
Returns boolean — true when window.innerWidth < 768.
Related
For an arbitrary breakpoint or media query, use useMediaQuery instead.
Built by malinskibeniamin. The source code is available on GitHub.