SayUI
← Library→ Turn this into a prompt
Navigation & structure

Safe Area Insets

The inset region free of notches, rounded corners, and the home indicator.

Also known as safe-area-inset · notch padding · home indicator gap

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Safe Area Insets".

Respect safe areas on the fixed bottom action bar: viewport-fit=cover in the meta viewport, then padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)). Same idea for top fixed headers under the notch.

Anatomy:
- top inset: Status bar, notch, Dynamic Island.
- bottom inset: Home indicator—most common miss.
- left/right inset: Landscape notches and rounded corners.

Preferred API / pattern: `env() in CSS / safe-area padding utilities`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Forgot viewport-fit=cover
  • ○Avoid: Fixed bottom CTA under the home indicator
  • ○Avoid: Ignoring landscape side insets
  • ○Avoid: Double-padding safe area and a huge extra margin

In plain wordsHow people search for it

“the home bar covering my bottom buttons on iPhone”“how do I stay clear of the notch / Dynamic Island”“content sliding under the status bar”

AnatomyOpen for part names

top inset
Status bar, notch, Dynamic Island.
bottom inset
Home indicator—most common miss.
left/right inset
Landscape notches and rounded corners.

How to write itOpen for stack patterns

Web (HTML/CSS)env(safe-area-inset-*) + viewport-fit=cover
React + Tailwind + shadcn/uienv() in CSS / safe-area padding utilities
SwiftUIsafeAreaInset / ignoresSafeArea carefully
Ant Designcustom CSS on fixed footers; no token required

Notes

On web, viewport-fit=cover must be set or env(safe-area-inset-*) stays 0 forever. Fixed bottom chrome (tab bars, submit bars, sheets) always pads. Pattern: padding-bottom: calc(16px + env(safe-area-inset-bottom)).

Common mistakesHumans and models trip here

  • Forgot viewport-fit=cover: env() is always 0—first thing to check.
  • Fixed bottom CTA under the home indicator: untappable.
  • Ignoring landscape side insets: content clips into curved corners.
  • Double-padding safe area and a huge extra margin: huge empty band.

More failure symptoms on AI broke it.

Related patterns

Tab Bar / Bottom NavigationFixed bottom global navigation switching top-level app areas.Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.FAB (Floating Action Button)A circular primary action fixed over content—usually bottom-right—reserved for the screen’s one main create action.Glassmorphism / Backdrop BlurBlur what’s behind a surface and tint it so the layer reads as translucent glass.

Spotted a wrong name or missing pattern?

Message on X