Safe
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 childrenchildrenchildrenReact.ReactNodeReact.ReactNode
Content to render inside the safe area
- Anchor to classNameclass
Nameclass Name stringstring Additional CSS classes
- Anchor to edgesedgesedgesEdge[]Edge[]
Which edges to apply safe area insets to. Defaults to all edges.
- Anchor to modemodemode'padding' | 'margin''padding' | 'margin'
Whether to apply insets as padding or margin. Defaults to 'padding'.
- Anchor to stylestylestyleReact.CSSPropertiesReact.CSSProperties
Additional inline styles
Edge
'top' | 'right' | 'bottom' | 'left'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
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 FullScreenPageDescription
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?