Skip to main content
sunpeak API

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

Wraps onhostcontextchanged

MCP Apps SDK reference

​
Import

import { SafeArea } from 'sunpeak';

​
Props

SafeArea accepts all standard <div> props (className, style, ref, etc.) plus:
​
children
ReactNode
required
Content to render inside the safe area.

​
Usage

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: 
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>
  );
}