Components

SafeArea

Inset content using browser safe-area environment variables.

Example

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

Default

Loading preview…

Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { SafeArea } from '@swiftuijs/ui';
export default function Example() {
    return (<SafeArea>{(<VStack spacing={20} style={{ padding: '20px' }}>
        <Text>This content respects safe areas</Text>
        <Text>Top, bottom, left, and right safe areas are applied</Text>
      </VStack>)}</SafeArea>);
}

Specific Edges

Apply safe area insets to specific edges:

Usage and limitations

  • edges defaults to all four edges; choose individual edges when only part of the screen needs an inset.
  • For notched mobile browsers, add viewport-fit=cover to the viewport meta tag. Insets depend on browser/device support; native Apple system layout is not emulated.
  • Usually apply at an application boundary. Check important content on actual notched devices and avoid duplicated insets.

More examples

Specific Edges

API reference

PropTypeRequiredDescription
edgesArray<'top' | 'bottom' | 'left' | 'right'>NoSafe area edges to apply Default: ['top', 'bottom', 'left', 'right']

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Refreshable

Refreshable adapts SwiftUI's `.refreshable` modifier into an explicit web container with a refresh affordance and busy state.

SafeAreaInset

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