Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA full-screen shell with a header padded for the notch, a scrolling main area and a footer padded for the home indicator, so content never hides under system bars in installed apps. Use this when you ship a web app that runs full screen on a phone (a PWA or a home-screen app) with viewport-fit=cover.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when you ship a web app that runs full screen on a phone (a PWA or a home-screen app) with viewport-fit=cover.
Do not use it for ordinary web pages in the browser, where the browser already keeps clear of the system bars.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
header | ReactNode | required | Top bar content. |
footer | ReactNode | - | Bottom bar content. |
children | ReactNode | required | The scrolling content. |
header, main and footer landmarks, so a screen reader can jump between them.viewport-fit=cover, so desktop looks normal.The pattern ships with a Testing Library test (safe-area-app-shell.test.tsx) that drives it through roles and the keyboard.