Skip to main content

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.

sunpeak API

​
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.
For most resources, use the <SafeArea> component instead — it applies both safe area padding and viewport height constraints automatically.

​
Import

import { useSafeArea } from 'sunpeak';

​
Signature

function useSafeArea(): SafeAreaInsets

​
Returns

​
return
SafeAreaInsets
Safe area insets object. Defaults to all zeros when unavailable.
{
  top: number;    // pixels
  bottom: number; // pixels
  left: number;   // pixels
  right: number;  // pixels
}

​
Usage

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.