> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# useSafeArea

> Get safe area insets.

<Badge color="yellow">sunpeak API</Badge>

## Overview

The `useSafeArea` hook returns the safe area insets for handling device notches, status bars, and other system UI. It is a convenience wrapper around `useHostContext`.

<Tip>For most resources, use the [`<SafeArea>`](/app-framework/components/safe-area) component instead — it applies both safe area padding and viewport height constraints automatically.</Tip>

## Import

```tsx theme={null}
import { useSafeArea } from 'sunpeak';
```

## Signature

```tsx theme={null}
function useSafeArea(): SafeAreaInsets
```

## Returns

<ResponseField name="return" type="SafeAreaInsets">
  Safe area insets object. Defaults to all zeros when unavailable.

  ```typescript theme={null}
  {
    top: number;    // pixels
    bottom: number; // pixels
    left: number;   // pixels
    right: number;  // pixels
  }
  ```
</ResponseField>

## Usage

```tsx theme={null}
import { useSafeArea } from 'sunpeak';

function MyResource() {
  const safeArea = useSafeArea();

  return (
    <div style={{ paddingTop: safeArea.top, paddingBottom: safeArea.bottom }}>
      Content with safe area padding.
    </div>
  );
}
```

Safe area insets come from [`McpUiHostContext.safeAreaInsets`](/mcp-apps/types/core-types#mcpuihostcontext).