Component
PWAProvider
PWAProvider publishes visual viewport and software-keyboard measurements as CSS variables at the document root. Mount it once so AppShell and other layouts share one source of truth.
Preview
Viewport tokens are active
One provider keeps application chrome and keyboard-aware layouts in sync.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/pwa-provider.jsonUsage
import { PWAProvider } from "@/components/ui/pwa-provider"
export default function RootLayout({ children }) { return ( <html lang="en"> <body> <PWAProvider>{children}</PWAProvider> </body> </html> )}Anatomy
PWAProvideruseVisualViewportCSS variablesComposition
See how PWAProvider, AppShell, SafeArea, NavigationBar, and TabBar divide viewport, scrolling, safe-area, and navigation responsibilities.
Behavior notes
- Mount once near the application root.
- PWAProvider publishes measurements but does not lock document scrolling; full-screen applications should use the opt-in root containment described in the app layout guide.
- Publishes --pwa-viewport-height, --pwa-visual-viewport-height, and --pwa-keyboard-height.
- Sets data-pwa-keyboard-open on the document root while a likely software keyboard is occluding the viewport.
- Keyboard detection is a layout hint and intentionally ignores pinch zoom.
Platform limitations
- Software-keyboard detection is a heuristic built on the Visual Viewport API. It cannot perfectly separate the keyboard from other viewport occlusions and is intentionally suppressed during pinch-zoom.
- On Android the reported keyboard height depends on the page's
interactive-widgetpolicy. Withoverlays-contentthe visual viewport does not shrink, so the keyboard variables stay at 0. See Platform limitations.
Accessibility
The provider renders no wrapper or interactive UI. It preserves pinch zoom and only changes layout variables used by your application.