# SafeArea

Source: https://lumeo.nativ.sh/components/safe-area

# SafeArea

Applies CSS env() safe-area insets so content stays clear of device notches, home indicators, and rounded display corners.

##### Desktop / Android note

SafeArea is invisible on desktop browsers and most Android devices — env(safe-area-inset-\*) resolves to 0px there. It only does real work on iPhones (notch / Dynamic Island / home indicator) and other devices with display cutouts where the browser runs in viewport-fit=cover mode.

## When to Use

-   Wrapping full-screen layouts on iPhones with notches or dynamic islands to avoid clipped content
-   Fixing bottom navigation bars and action sheets that overlap the home indicator on notched devices
-   PWAs and hybrid apps running in standalone mode where the OS chrome is absent
-   Modals, drawers, and sheets that extend edge to edge and need inset compensation
-   Any layout where `viewport-fit=cover` is set in the meta tag

Preview Code

Top and Bottom Safe Area

Safe content

Padded away from top and bottom insets via env(safe-area-inset-top/bottom)

Copy Code

Preview Code

All Edges

Full safe area

Padding applied on all four edges — useful for full-screen overlays

Copy Code

Preview Code

Bottom Only (navigation bar pattern)

Home

Search

Profile

Copy Code

Preview Code

Sticky bottom tab bar (realistic example)

List item 9

List item 9

List item 9

List item 9

List item 9

List item 9

List item 9

List item 9

Home

Search

Profile

On iPhone, SafeArea pushes the bar above the home indicator. On desktop it has no visual effect — the bar just sits at the bottom as normal.

Copy Code

## API Reference

### SafeArea

Property

Type

Default

Description

ChildContent

RenderFragment?

—

Content to wrap with safe-area padding.

Top

bool

true

Apply `padding-top: env(safe-area-inset-top)`.

Bottom

bool

true

Apply `padding-bottom: env(safe-area-inset-bottom)`.

Left

bool

false

Apply `padding-left: env(safe-area-inset-left)`.

Right

bool

false

Apply `padding-right: env(safe-area-inset-right)`.

Class

string?

null

Additional CSS classes applied to the wrapper element.

## Related Components

-   [PullToRefresh](/components/pull-to-refresh) — Gesture-driven data reload typically used inside a safe-area layout
-   [Sheet](/components/sheet) — Bottom sheet overlay that benefits from bottom safe-area insets
-   [Drawer](/components/drawer) — Side drawer that may require left/right safe-area on landscape phones