Skip to main content

​
Screen

The page container. It applies the theme background, reserves the bottom safe area, and can make room for the keyboard.
​
boolean | number
Content padding. true is 16 px.
​
boolean
default:"true"
Reserve the bottom safe area (home indicator, gesture bar).
​
boolean
Grow the bottom padding by the native keyboard’s height, so a form at the bottom stays visible.
​
string
Background override. Defaults to the theme’s bg.
Also accepts any div attribute. 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.
​
ReactNode
Header title.
​
() => void
Show a back chevron on the left that calls this.
​
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.
​
ReactNode
Custom slots. They replace the automatic back and close buttons.
​
'left' | 'center'
Title alignment.
​
boolean
No background or border, for a header over a hero image.
​
boolean
Bottom hairline. Default true unless transparent.
​
boolean
default:"true"
Haptic on the back and close buttons.
​
number
Stacking order.
In a mobile or desktop shell there is already a native header above your page. Use NativeHeader to configure that one in a shell and fall back to Header in a browser and on TV.

​
PullToRefresh

A scroll container that refreshes when pulled down from the top. Give it a bounded height (a flex child, or height: 100%).
​
() => Promise<void> | void
required
Called when the user pulls past the threshold. The spinner stays until the promise settles.
​
number
default:"64"
Pull distance in px that triggers a refresh.
​
boolean
Turn pulling off.