useSafeArea

Returns the safe area insets for the current device in pixels. These values represent the areas of the screen obscured by system UI such as the home indicator on iOS or the navigation bar on Android. Use these values to ensure your content is not hidden behind system chrome.

The insets are injected by the Shop app and work reliably on both iOS and Android. The equivalent CSS custom properties (--safe-area-inset-top, --safe-area-inset-right, --safe-area-inset-bottom, --safe-area-inset-left) are also available for use in stylesheets.

Your Mini should handle all four edges to ensure correct rendering across devices and future layout changes.

Anchor to useSafeArea
useSafeArea()

Anchor to useSafeArea-returnsReturns

Examples

tsx

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

export default function SafeContent() {

const {top, right, bottom, left} = useSafeArea()

return (

<div

className="min-h-dvh flex flex-col"

style={{

paddingTop: top,

paddingRight: right,

paddingBottom: bottom,

paddingLeft: left,

}}

<p className="px-4">Content is safely inset from all edges.</p>

</div>

)

}

Examples

tsx

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

export default function SafeContent() {
  const {top, right, bottom, left} = useSafeArea()

  return (
    <div
      className="min-h-dvh flex flex-col"
      style={{
        paddingTop: top,
        paddingRight: right,
        paddingBottom: bottom,
        paddingLeft: left,
      }}
    >
      <h1 className="flex-1 px-4">My Page</h1>
      <p className="px-4">Content is safely inset from all edges.</p>
    </div>
  )
}

Was this page helpful?

Anchor to useSafeAreauseSafeArea()

Anchor to useSafeArea-returnsReturns

SafeAreaInsets

Anchor to useSafeArea
useSafeArea()