> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Safe area

> Keep content clear of notches, status bars and home indicators on every host.

`Screen`, `Header`, `TabBar` and `Sheet` already handle the safe area. You only need this page when you build fixed or full-bleed UI yourself.

In a shell, the host reports its insets over the bridge (`app.insets`). In a browser, the CSS `env(safe-area-inset-*)` values apply. The helpers below combine both, so you never have to choose.

## In CSS

`UIProvider` publishes the shell's insets on its wrapper as `--cskn-inset-top`, `-right`, `-bottom` and `-left`. `insetCss` builds an expression that takes the largest of the shell value, the browser value and an optional minimum:

```tsx theme={null}
import { insetCss } from '@cskn/ui';

<div
  style={{
    position: 'fixed',
    left: 0,
    right: 0,
    bottom: 0,
    paddingBottom: insetCss('bottom', 12),
  }}
>
  <Toolbar />
</div>
```

```ts theme={null}
insetCss('top');      // max(var(--cskn-inset-top, 0px), env(safe-area-inset-top), 0px)
insetCss('bottom', 12);
```

## In JavaScript

```tsx theme={null}
import { useInsets, useUI } from '@cskn/ui';

const insets = useInsets();         // { top, right, bottom, left } in CSS px
const { insets: same } = useUI();
```

Outside React: `getInsets()` and `onInsetsChange(cb)`, which returns an unsubscribe function. `startInsetVars()` writes the `--cskn-inset-*` variables onto the document root if you are not using `UIProvider`.

<Note>
  In a browser no inset message arrives, so the JavaScript values stay `0`. Prefer `insetCss`, which falls back to `env(safe-area-inset-*)`, for anything that must also work in a browser.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.