> ## 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.

# Screen and Header

> The page frame: safe-area padding, a fixed header that never stretches, and pull to refresh.

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

function Library() {
  return (
    <Screen padded safeBottom>
      <Header title="Library" onBack={goBack} />
      <BookList />
    </Screen>
  );
}
```

## Screen

The page container. It applies the theme background, reserves the bottom safe area, and can make room for the keyboard.

<ParamField path="padded" type="boolean | number">Content padding. `true` is 16 px.</ParamField>
<ParamField path="safeBottom" type="boolean" default="true">Reserve the bottom safe area (home indicator, gesture bar).</ParamField>
<ParamField path="keyboardAvoiding" type="boolean">Grow the bottom padding by the native keyboard's height, so a form at the bottom stays visible.</ParamField>
<ParamField path="background" type="string">Background override. Defaults to the theme's `bg`.</ParamField>

Also accepts any `div` attribute.

## Header

A safe-area-aware app header. It is `position: fixed` rather than `sticky`, and renders a spacer of its own measured height, so:

* it never stretches when a native WebView overscrolls, which a sticky header does;
* the content below it starts in the right place with no hard-coded offset.

<ParamField path="title" type="ReactNode">Header title.</ParamField>
<ParamField path="onBack" type="() => void">Show a back chevron on the left that calls this.</ParamField>

<ParamField path="showClose" type="boolean">
  Show a close button that closes the mini app. Defaults to `true` inside a shell and `false` in a browser, where there is nothing to close.
</ParamField>

<ParamField path="left / right" type="ReactNode">Custom slots. They replace the automatic back and close buttons.</ParamField>
<ParamField path="titleAlign" type="'left' | 'center'">Title alignment.</ParamField>
<ParamField path="transparent" type="boolean">No background or border, for a header over a hero image.</ParamField>
<ParamField path="border" type="boolean">Bottom hairline. Default `true` unless `transparent`.</ParamField>
<ParamField path="haptic" type="boolean" default="true">Haptic on the back and close buttons.</ParamField>
<ParamField path="zIndex" type="number">Stacking order.</ParamField>

<Tip>
  In a mobile or desktop shell there is already a native header above your page. Use [`NativeHeader`](/ui/components/navigation#nativeheader) to configure that one in a shell and fall back to `Header` in a browser and on TV.
</Tip>

## PullToRefresh

A scroll container that refreshes when pulled down from the top. Give it a bounded height (a flex child, or `height: 100%`).

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

<PullToRefresh onRefresh={async () => { await refetch(); }}>
  <Feed />
</PullToRefresh>
```

<ParamField path="onRefresh" type="() => Promise<void> | void" required>Called when the user pulls past the threshold. The spinner stays until the promise settles.</ParamField>
<ParamField path="threshold" type="number" default="64">Pull distance in px that triggers a refresh.</ParamField>
<ParamField path="disabled" type="boolean">Turn pulling off.</ParamField>


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