> ## 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.

# SafeArea

> Component that applies safe area padding and viewport constraints.

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

## Overview

The `SafeArea` component wraps content with device safe area padding and viewport dimension constraints. It replaces the common pattern of manually combining `useSafeArea()` and `useViewport()` in every resource.

<Card horizontal title="Wraps onhostcontextchanged" icon="cube" href="/mcp-apps/app/event-handlers/onhostcontextchanged">
  MCP Apps SDK reference
</Card>

## Import

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

## Props

`SafeArea` accepts all standard `<div>` props (`className`, `style`, `ref`, etc.) plus:

<ResponseField name="children" type="ReactNode" required>
  Content to render inside the safe area.
</ResponseField>

## Usage

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

function MyResource() {
  return (
    <SafeArea className="h-full">
      <h1>Hello</h1>
      <p>This content respects device safe areas and viewport constraints.</p>
    </SafeArea>
  );
}
```

## What it does

`SafeArea` renders a `<div>` with:

* `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight` from the host's safe area insets in pixels (for notches, status bars, rounded corners)
* `height`, `maxHeight`, `width`, `maxWidth` from the host's container dimensions in pixels (whichever the host provides)
* In **fullscreen** mode, `height: 100dvh` is applied automatically (unless the host provides an explicit height), so flex column layouts with internal scrolling work without manual display mode handling

You can override or extend these via the `style` prop. Any additional props (like `className`) are passed through to the underlying `<div>`.

## Ref forwarding

`SafeArea` forwards refs to the underlying `<div>`, so you can use it with `useRef`:

```tsx theme={null}
import { useRef } from 'react';
import { SafeArea } from 'sunpeak';

function MyResource() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <SafeArea ref={containerRef} className="overflow-auto">
      <div>Scrollable content</div>
    </SafeArea>
  );
}
```