---
title: SafeArea
description: >-
  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.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/safearea'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/safearea.md'
---

# 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"]}`.

#### Props

* **children**

  **React.ReactNode**

  Content to render inside the safe area

* **className**

  **string**

  Additional CSS classes

* **edges**

  **Edge\[]**

  Which edges to apply safe area insets to. Defaults to all edges.

* **mode**

  **'padding' | 'margin'**

  Whether to apply insets as padding or margin. Defaults to 'padding'.

* **style**

  **React.CSSProperties**

  Additional inline styles

### Edge

```ts
'top' | 'right' | 'bottom' | 'left'
```

Examples

### Examples

* ####

  ##### tsx

  ```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

  ```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
  ```

***