Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA wrapper that pads its content by the device's safe-area insets (notch, rounded corners, home indicator) with a minimum, swapping start and end for right-to-left text.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for fixed headers, footers and full-bleed screens in an installed web app or a phone browser, so content never sits under the notch or the home indicator.
Do not use it on desktop-only pages (it does nothing), and do not wrap the whole page: pad only the edges that touch the screen edge.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
SafeArea | edges | ("top" | "bottom" | "start" | "end")[] | all four | Which edges get padding. |
SafeArea | min | number | 0 | Padding in px that applies where the inset is 0. |
SafeArea | as | ElementType | "div" | The element to render. |
as to render the right landmark element (header, footer, main).The component ships with a Testing Library test (safe-area.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.