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
SafeAreaBehavior 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.
Accessibility
SafeArea is a layout-only div and does not alter the semantics of its children.