useIsMobile

Detect whether the viewport is below the mobile breakpoint (768px).

Installation

npx shadcn@latest add @redpanda/use-mobile

pnpm dlx shadcn@latest add @redpanda/use-mobile

yarn dlx shadcn@latest add @redpanda/use-mobile

bunx shadcn@latest add @redpanda/use-mobile

nubx shadcn@latest add @redpanda/use-mobile

aube dlx shadcn@latest add @redpanda/use-mobile

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.

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.