SafeArea

A container that applies safe area insets as padding or margin, ensuring content is not hidden behind system UI such as the home indicator on iOS or the navigation bar on Android.

You can pass in custom classes and styles just like a regular div, so we recommend using it in place of your usual top-level wrapper.

When no edges prop is specified, all four edges are applied. If you only need a specific edge, for example a sticky footer, use edges={["bottom"]}.

Anchor to propsProps

Anchor to children children React.ReactNode: Content to render inside the safe area
Anchor to className className string: Additional CSS classes
Anchor to edges edges []: Which edges to apply safe area insets to. Defaults to all edges.
Anchor to mode mode 'padding' | 'margin': Whether to apply insets as padding or margin. Defaults to 'padding'.
Anchor to style style React.CSSProperties: Additional inline styles

Examples

tsx

import {SafeArea} from '@shopify/shop-minis-react'

function FullScreenPage() {

return (

<p>

This content is padded away from all safe area edges so it will not be

hidden behind system UI.

</p>

</SafeArea>

)

}

export default FullScreenPage

Examples

tsx

import {SafeArea} from '@shopify/shop-minis-react'

function FullScreenPage() {
  return (
    <SafeArea className="min-h-dvh p-4">
      <h1>My Page</h1>
      <p>
        This content is padded away from all safe area edges so it will not be
        hidden behind system UI.
      </p>
    </SafeArea>
  )
}

export default FullScreenPage

Description

Wrap a sticky footer to keep it above the home indicator

tsx

import {SafeArea} from '@shopify/shop-minis-react'

function StickyFooter() {
  return (
    <div className="min-h-dvh p-4">
      <h1>My Page</h1>
      <p>Some content above the sticky footer.</p>

      <SafeArea
        edges={['bottom']}
        className="fixed bottom-0 inset-x-0 p-4 bg-white text-center"
      >
        <button>Add to Cart — $29.99</button>
      </SafeArea>
    </div>
  )
}

export default StickyFooter

Was this page helpful?

Anchor to propsProps

Edge