Introduction
Build mobile web apps
that feel installed.
PWA UI is a source-owned React component layer for the interaction and layout problems unique to mobile-first web applications.
Why PWA UI?
Accessible primitives already solve dialogs, focus management, and keyboard interaction. PWA UI composes those foundations with safe areas, dynamic viewports, mobile navigation chrome, software keyboard behavior, and touch-first presentation.
Mobile-firstDesigned from the phone interaction outward.
Source-ownedInstalled through a shadcn registry and edited locally.
ComposableWorks beside shadcn, Base UI, and your router.
Installation
Start with the shared platform tokens, then install only the components required by your screen.
pnpm dlx shadcn@latest add https://pwaui.com/r/pwa-base.jsonpnpm dlx shadcn@latest add https://pwaui.com/r/app-shell.json\npnpm dlx shadcn@latest add https://pwaui.com/r/bottom-sheet.json\npnpm dlx shadcn@latest add https://pwaui.com/r/tab-bar.jsonComponents
The MVP is deliberately small: eight primitives that form a coherent mobile application layer.
AppShellA dynamic-viewport frame for fixed application chrome and independently scrolling content.SafeAreaExplicit safe-area padding powered by CSS environment variables.BottomSheetA swipeable, keyboard-aware mobile bottom sheet built on Base UI Drawer.ResponsiveDialogOne content tree rendered as a desktop dialog or mobile bottom sheet.ActionSheetGrouped, touch-first actions with destructive and cancel treatments.NavigationBarSafe-area-aware top application chrome with an optically centered title.TabBarRouter-agnostic bottom navigation with labels, active state, and badges.KeyboardAvoidingViewVisual Viewport-aware layout for forms and fixed composers.InstallPromptA persistent, accessible invitation to install the PWA when the browser allows it.UpdatePromptA persistent notice for service-worker updates that are ready to activate.OfflineBannerPersistent, non-blocking feedback when the browser reports an offline state.