---
title: useIsMobile
description: Detect whether the viewport is below the mobile breakpoint (768px).
icon: smartphone
---

### Installation

```package-install
npx 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.

:::info
Returns `false` until the first client-side measurement resolves after mount, so it is SSR-safe.
:::

## Usage

```tsx showLineNumbers
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`](/docs/use-media-query) instead.