SafeArea

SafeArea

{/* Add the iOS home-bar inset to the bottom of a fixed bar */}
<div style={{ position: 'fixed', insetInlineStart: 0, insetInlineEnd: 0, bottom: 0 }}>
  <SafeArea edges={['bottom']}>
    <BottomNav>…</BottomNav>
  </SafeArea>
</div>

{/* Reserve all four insets on a full-screen page */}
<SafeArea edges="all">
  <PageContent />
</SafeArea>

To opt into safe-area handling, your <meta name="viewport" content="…"> must include viewport-fit=cover.

Install: @helixui/core

import { SafeArea } from '@helixui/core'

status: stable · since: 0.5.0

Tags: mobile, inset, notch, home-indicator

Anatomy

╔═════════════════════════════╗  ← top inset (notch / status bar)
║  <children>                ║
║                            ║
╚═════════════════════════════╝  ← bottom inset (home indicator)

Layout

• display — block
• width — fill
• height — fill
• intrinsicSize — fills viewport; pads chosen edges by env(safe-area-inset-*)
• stackable — false
• fullBleed — true

Visual

A presentational wrapper that reads env(safe-area-inset-top|right|bottom|left) and applies them as padding (default) or margin to the chosen edges.

Props

Name	Type	Default	Description
edges	SafeAreaEdge[] | 'all'	all	Which edges to reserve. `‘top'
apply	'padding' | 'margin'	padding	How to apply the inset.

Accessibility

Notes

• SafeArea is presentational. It does not change focus order or alter content semantics.

Composes with

Component	Relation	Note
AppShell	parent	Wrap AppShell on mobile builds.
BottomNav	parent	Often wraps the BottomNav region.
FAB	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

pad below the notch

“safe area top + bottom”

<SafeArea edges={['top','bottom']}>
  <App />
</SafeArea>

Related

• BottomNav
• FAB