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 variablesBehavior notes
- Mount once near the application root.
- 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.
Accessibility
The provider renders no wrapper or interactive UI. It preserves pinch zoom and only changes layout variables used by your application.