@neynar/ui/llm-docs/use-is-mobile.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# useIsMobile

**Type**: hook

Hook for detecting mobile viewport width based on Tailwind CSS breakpoints A React hook that monitors viewport width and returns true when the width is less than 768px (Tailwind's `md` breakpoint). This hook provides a consistent way to conditionally render mobile and desktop layouts, following the same responsive patterns used throughout the shadcn/ui ecosystem. The hook uses `window.matchMedia` for efficient viewport monitoring and properly handles server-side rendering by returning `false` initially, then updating on the client side.

## API Surface

```typescript
import { useIsMobile } from '@neynar/ui';

export function useIsMobile(): ReturnType<typeof useIsMobile> { ... }
```

## Returns

**Return Type**: `ReturnType<typeof useIsMobile>`


**Description**: `true` if viewport width is less than 768px, `false` otherwise
## Usage

```typescript
import { useIsMobile } from '@neynar/ui';

const result = useIsMobile();
```

## Examples

### Example 1
Basic responsive layout switching
```tsx
function ResponsiveComponent() {
  const isMobile = useIsMobile();
  
  return (
    <div>
      {isMobile ? (
        <MobileLayout />
      ) : (
        <DesktopLayout />
      )}
    </div>
  );
}
```
### Example 2
Conditional navigation rendering
```tsx
function Navigation() {
  const isMobile = useIsMobile();
  
  if (isMobile) {
    return <Sheet><MobileNavContent /></Sheet>;
  }
  
  return <NavigationMenu><DesktopNavContent /></NavigationMenu>;
}
```
### Example 3
Responsive component behavior within forms
```tsx
function SearchDialog() {
  const isMobile = useIsMobile();
  
  if (isMobile) {
    return <Drawer><SearchForm /></Drawer>;
  }
  
  return <Dialog><SearchForm /></Dialog>;
}
```