Mobile (Capacitor)
Thunder UI ships as an Android and iOS app too - Capacitor 8 is pre-configured with the native projects committed.
Capacitor 8 is pre-configured, and android/ and ios/ are committed to the repository. The mobile build runs the web build in mobile mode and then npx cap sync.
capacitor.config.ts sets webDir: "www" - the same output directory the web build uses.
Installed Plugins
| Plugin |
|---|
@capacitor/app |
@capacitor/browser |
@capacitor/camera |
@capacitor/clipboard |
@capacitor/keyboard |
@capacitor/preferences |
@capacitor/push-notifications |
@capacitor/share |
@capacitor/splash-screen |
| Android edge-to-edge |
Handled by Core
You do not need to wire any of these yourself:
- Status and navigation bar colours follow the resolved theme.
- Safe-area insets, exposed as the
safe-t/safe-b/safe-l/safe-rspacing tokens and applied in every layout. - OIDC through the in-app browser, with a custom-scheme callback and tokens in Capacitor Preferences - see Authentication.
- Bundled fonts, so text renders offline.
Pick a Layout
VITE_APP_LAYOUT=nativenative is the one to use for an installed app. It is a single adaptive shell - a floating tab bar, large-to-compact titles and an edge-swipe back gesture on a phone, and a persistent sidebar on a desktop - decided by md: variants, so the first painted frame is already the right shape.
mobile remains available for the simpler sticky-header-plus-bottom-tabs shell. See Layouts & Theming for both, and for the platform baseline (the glass material, no tap highlight, no pull-to-refresh, no input-focus zoom, viewport-fit=cover) that every layout inherits.
Before You Ship
capacitor.config.ts ships with appId: "com.huruf.thunderui" and appName: "thunder-ui", and the committed native projects carry that identifier. A real app must change these. The visible app name comes from the name field in package.json.
Push Notifications
Registered through @capacitor/push-notifications; the device token is posted to the backend with ThunderSDK.users.addFcmToken. The in-app notification UI itself is served by the Triggers service and gated behind VITE_ENABLE_NOTIFICATIONS.
Onboarding
src/components/onboarding.tsx is a first-launch carousel that ships with an empty screen list, so nothing shows by default. Add entries to its Screens array to enable it.