Safe Area Edge Gutters

ProNew

A list and a toolbar in landscape that keep their content out of the notch and rounded corners using start and end insets, while their backgrounds run edge to edge. Use this when your app is used in landscape on a phone with a notch or rounded corners and side content would be clipped.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when your app is used in landscape on a phone with a notch or rounded corners and side content would be clipped.

Do not use it for portrait-only apps, or pages in a normal browser tab.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`{ id: string; title: string }[]`	`required`	List rows.
`toolbar`	`ReactNode`	`-`	Content for the top toolbar.

Accessibility

Only padding changes, so reading and focus order are unchanged.
Start and end swap in right-to-left text (the inset that is physical left becomes the end side), so content clears the notch on either side.
Row backgrounds still reach the screen edge, so the layout does not look cropped.

Testing

The pattern ships with a Testing Library test (safe-area-edge-gutters.test.tsx) that drives it through roles and the keyboard.