useIsMobile

Copy Markdown

Reports whether the viewport is below the mobile breakpoint.

useIsMobile tells you if the viewport is less than 768px. It uses matchMedia, so it reacts instantly to browser zoom and device rotation, not just window resizing.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/use-is-mobile

Usage#

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

Example#

"use client";

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

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

  return (
    <p className="text-muted-foreground text-sm">
      {isMobile ? "Mobile layout" : "Desktop layout"}
    </p>
  );
}

[

TanStack Form ](/docs/forms/tanstack-form)

On This Page

Installation Usage Example