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

# App control

> Customize the shell's native header and close the app.

On mobile and desktop, the shell draws a native header above your page. You can change its title and colors, add an action button, hide it, or close the app.

```tsx theme={null}
import { useEffect } from 'react';
import { useAppControl, useHeaderAction } from '@cskn/sdk';

function CartScreen() {
  const { setHeader } = useAppControl();

  useEffect(() => {
    setHeader({
      title: 'Cart',
      backgroundColor: '#1e293b',
      textColor: '#ffffff',
      action: { icon: 'share-outline', id: 'share' },
    });
  }, [setHeader]);

  useHeaderAction((id) => {
    if (id === 'share') openShareSheet();
  });

  return <CartItems />;
}
```

<Tip>
  If your app also runs in a browser, use [`NativeHeader`](/ui/components/navigation#nativeheader) from @cskn/ui. It sets the native header in a shell and draws an in-page header everywhere else.
</Tip>

## setHeader

Only the fields you pass change; the rest keep their current value. The configuration belongs to your app and is reset when it closes.

<ParamField path="title" type="string">
  Header title. Defaults to the app's name.
</ParamField>

<ParamField path="backgroundColor" type="string">
  Header background. Defaults to the shell's theme.
</ParamField>

<ParamField path="textColor" type="string">
  Color of the title, the back and close chevrons, and the action icon.
</ParamField>

<ParamField path="action" type="{ icon: string; id?: string } | null">
  The button on the right. `icon` is an [Ionicons](https://ionic.io/ionicons) name such as `share-outline`; unknown names show an ellipsis. `id` comes back in `useHeaderAction`. Pass `null` to remove the button.
</ParamField>

The back button is automatic: when the WebView has history to go back to, the shell shows a back chevron on the left and navigates back on tap.

## Other controls

| Hook / function | Effect |
| - | - |
| `showHeader(false)` / `showHeader(true)` | Hide or show the native header. It is shown by default after the page loads. |
| `closeApp()` | Close the mini app and return to the shell. |
| `useHeaderAction(handler)` / `onHeaderAction(cb)` | Called with the action's `id` when it is tapped. `onHeaderAction` returns an unsubscribe function. |

Off-shell, all of these are no-ops.


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