Components

SafeAreaInset

SafeAreaInset adapts SwiftUI's .safeAreaInset modifier into an explicit layout container for the web.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Bottom

Loading preview…

Code
'use client';
import { Button } from '@swiftuijs/ui';
import { SafeAreaInset } from '@swiftuijs/ui';
export default function Example() {
    return ((<SafeAreaInset edge="bottom" inset={<Button>Compose</Button>}>
      <div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 16 }}>
        Mail list
      </div>
    </SafeAreaInset>));
}

Usage and limitations

  • Uses CSS safe-area environment variables. Add viewport-fit=cover to your viewport meta tag when targeting notched mobile browsers; this does not emulate native system safe-area layout.

More examples

Top

API reference

PropTypeRequiredDescription
edge'top' | 'bottom' | 'leading' | 'trailing'No—
insetReactNodeYes—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

SafeArea

Inset content using browser safe-area environment variables.

ScenePadding

ScenePadding adapts SwiftUI's `scenePadding` modifier into an explicit layout wrapper for web scenes and grouped screens.