---
title: useSafeArea
description: Returns the safe area insets for the current device in pixels.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/util/usesafearea'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/util/usesafearea.md'
---

# 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.

## use​Safe​Area()

### Returns

* **SafeAreaInsets**

### SafeAreaInsets

* bottom

  ```ts
  number
  ```

* left

  ```ts
  number
  ```

* right

  ```ts
  number
  ```

* top

  ```ts
  number
  ```

Examples

### Examples

* ####

  ##### tsx

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

***