Component
SafeArea
SafeArea applies only the requested platform insets. It gracefully resolves to zero in ordinary browser tabs and never relies on model-specific device detection.
Preview
Content stays clearInsets are applied on every requested edge.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/safe-area.jsonUsage
import { SafeArea } from "@/components/ui/safe-area"
export function Footer() { return ( <SafeArea edges={["left", "right", "bottom"]}> <nav>...</nav> </SafeArea> )}Anatomy
SafeAreaComposition
See how PWAProvider, AppShell, SafeArea, NavigationBar, and TabBar divide viewport, scrolling, safe-area, and navigation responsibilities.
Behavior notes
- Supported edges: top, right, bottom, and left.
- Uses env(safe-area-inset-*) with zero-value fallbacks.
- Combine it with your own spacing inside a nested child when padding must be additive.
Platform limitations
env(safe-area-inset-*)only reports non-zero values when the page setsviewport-fit=coveron a device with display cutouts or an installed/edge-to-edge surface. Everywhere else these resolve to 0 by design.
Accessibility
SafeArea is a layout-only div and does not alter the semantics of its children.