Mobile
iPhone and Android apps through Capacitor, with storage, the back button, deep links and safe areas handled natively.
- iOS
- Android
kitr add mobile phoneFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
// app/components/shell.tsx
import { useBackButton, useSafeArea } from '@kitr/platform/react'
import { useCallback, type ReactNode } from 'react'
export function Shell({ children }: { children: ReactNode }) {
const insets = useSafeArea()
useBackButton(
useCallback(({ canGoBack }) => canGoBack && window.history.back(), []),
)
return <main style={{ paddingTop: insets.top }}>{children}</main>
}Native projects you own
The Xcode and Android Studio projects live in platforms/phone/. kitr dev adds them the first time and --target ios picks one.
Live reload on the device
The app on your phone loads the dev server over the network, so a saved file shows up on the device in a second.
Hooks for the device
usePlatform, useAppState, useBackButton, useDeepLink and useSafeArea answer the same way in the browser and in the app.
Storage that survives
Storage items move to Capacitor Preferences, which iOS and Android keep when they clear a webview to free space.
Same commands as every platform
Every platform answers to kitr dev, kitr build and kitr start, by the name you gave it. Leave the name off to run them all.
- kitr dev phone
- live reload on a device or simulator, port 3100
- kitr build phone
- the web build synced into ios/ and android/
- kitr doctor
- checks Xcode and Android Studio
Packages that work here
32 packages run on mobile. Each one is a single kitr add away.
Switch to native hereTheir drivers switch to the native APIs underneath, with no code change.
Data fetching
App state
Backend
Interface
- 3dRender 3D scenes and models that stay smooth on phones and fall back when WebGL is missing.
- animationAnimate components and page changes, and respect the visitor's reduced-motion setting.
- i18nTranslate your app into several languages with typed keys.
- tableShow rows of data with sorting, paging and filters that stay in the URL.
- tailwindStyle with Tailwind CSS classes, already set up with kitr's colours.
- themeLight, dark and system themes with no flash on load, design tokens, and the components you copy into your app.
- toastShow short messages like "Saved" or "Could not send" from anywhere in your app, even outside React.
Device features
- filesLet people open, save and pick files on any platform, with a download fallback in older browsers.
- nativeClipboard, share sheet, haptics, location, camera and fingerprint unlock, each with a web fallback.
- notificationsAsk for permission and show local or scheduled notifications that open the right page when tapped.
- secure-storageKeep login tokens and secrets in the phone or computer's secure vault instead of plain storage.
Analytics & errors
- analyticsCount page views and button clicks, and send them to the analytics service you choose.
- consentAsk for cookie and tracking consent once, and hold analytics and error reports until people agree.
- monitoringCatch errors in the browser and on the server, and see which user hit them and what they did first.
Developer tools
- devtoolsA panel that shows what every package is doing, opened by a button, a shortcut or a gesture. On in development; one flag ships it.
- loggerWrite readable logs in development and structured logs in production.
- mocksFake your API while you build the frontend or run tests.
- testingTest components and API routes with everything already wired up.
Learn more
Start from a kit
A kit sets up the platforms, the packages and a first page in one command.
kitr new my-app --kit mobileFirst time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.
Add another platform
Platforms share the app/ folder, so adding one is a command, not a rewrite.