PWA UI — React components for mobile-first PWAs

Docs / Introduction

Interactive showcase

Feel the components working together.

Open the phone-first mini-app, pull to refresh, push a detail, switch tabs, and try the install path.

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

Add the PWA UI namespace to your shadcn configuration, install the provider and the components required by your screen, then import the generated base stylesheet once.

json

{  "registries": {    "@pwa-ui": "https://pwaui.com/r/{name}.json"  }}

bash

pnpm dlx shadcn@latest add @pwa-ui/pwa-provider @pwa-ui/app-shell @pwa-ui/tab-bar

tsx

import "@/styles/pwa.css"

Mount PWAProvider once near your application root. Every component page includes a direct URL command as a fallback.

Components

The beta is deliberately small: 14 primitives that form a coherent mobile application layer.

PWAProviderOne shared viewport subscription and stable PWA layout variables for the application.AppShellA dynamic-viewport frame for fixed application chrome and independently scrolling content.SafeAreaExplicit safe-area padding powered by CSS environment variables.PullToRefreshA resistant, touch-driven refresh viewport for list and feed screens.StackNavigatorA controlled stack of mounted views with interruptible push and pop transitions.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.NavigationBarRouter-composable top application chrome with an optically centered title.TabBarRouter-composable 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, with a manual path where the browser offers no prompt.UpdatePromptA persistent notice for service-worker updates that are ready to activate.OfflineBannerPersistent, non-blocking feedback when the browser reports an offline state.