native npm tagGramproKit for React Native
The components you use on the web, drawn natively for iOS and Android, with the same props. Plus the mobile patterns a web library never needed. Copy-in source, zero dependencies, works in Expo Go.
npx @grampro/kit@native add ButtonReact Native support is in beta. APIs may change or break between prereleases (npm tag native).
Live
The real components, running in your browser
These phones run the native source through react-native-web. Tap, type and open sheets. A real device feels better still: install the demo app below.
AppBar
Forms
Lists
Try it on your phone
GramproKit Demo is a sample business app built only from Kit: dashboard, invoice form, every component, and a live theme editor. Android 7.0 or later, 64-bit (arm64). About 21 MB. On iPhone, run the playground in Expo Go.
Android asks you to allow installs from your browser the first time. The demo is debug-signed, for trying Kit, not for production.
Same API as the web Kit
Same component names, same props, same core logic: date maths, number parsing, stores and validation are shared code, not ports.
Expo Go friendly
Pure JavaScript with no native modules: runs in Expo Go, development builds and bare React Native. Try it on an iPhone without a Mac.
Zero dependencies
Copy-in source you own. No gesture, animation, SVG or styling library: core Animated, PanResponder and StyleSheet.
Agent-ready
Component passports, an agent skill for Claude Code, Codex and Antigravity, and the same agent contracts as the web.
Light and dark
The --gbs-* tokens as a theme object. Follows the device setting, with a raised surface so dark mode keeps its depth.
Mobile patterns
AppBar, BottomNavigation, Fab and SpeedDial, SegmentedControl, ListItem, BottomSheet and SearchBar, built for touch.
Components
Everything in the native edition
Mobile only
AppBar
The bar at the top of a screen: title, back or menu button, and actions. Small, centred, medium and large-title variants.
Read the docsBottomNavigation
Top-level destinations at the bottom of the app, Material 3 style: icon in a pill, labels and badges.
Read the docsFab & SpeedDial
The floating action button for a screen's main action, extended with a label, and a SpeedDial of related actions.
Read the docsSegmentedControl
A row of mutually exclusive (or, with `multiple`, combinable) options, iOS style.
Read the docsListItem & List
Rows for settings, contacts and inboxes: leading icon, title and description, trailing value, control or chevron.
Read the docsBottomSheet
A panel that slides up from the bottom for secondary actions, a short form or details. Drag down, tap outside or press back to close.
Read the docsSearchBar
A rounded search field with a clear button, an optional iOS-style Cancel, and a debounced onSearch.
Read the docs
Actions
Forms
Input & OtpInput
Text fields with label, hint and error, clear and reveal buttons, a character count, and a one-time-code input that fills from SMS.
Read the docsNumberInput
Locale-aware numbers, currency and percent with − and + steppers that repeat when held.
Read the docsTextarea
Multi-line text with a fixed or auto-growing height and a grapheme-accurate character count.
Read the docsCheckbox
Checkboxes and groups with select-all and the mixed state.
Read the docsRadioGroup
Single choice from a list, as rows or as cards.
Read the docsSwitch
On/off settings with an async save state that rolls back on failure.
Read the docsFileUploader
Pick, validate and upload files with progress, retry and remove. You bring the picker; Kit takes no dependency.
Read the docs
Pickers
Overlays
Toaster
Brief messages that stack, auto-dismiss, pause on touch and swipe away. Fire them with toast() from anywhere.
Read the docsDialog
Alert, confirm and prompt dialogs, awaited from code with dialog.confirm().
Read the docsModal
Centre, drawer, full-screen and bottom-sheet modals with close guards.
Read the docsMenu
Action menus with checkbox and radio items and submenus. An action sheet on phones, a popover on tablets.
Read the docsPopover
A panel anchored to its trigger, placed with the same maths as the web Popover.
Read the docsTooltip
A short hint on long-press, since touch has no hover. Also added to the trigger's accessibility hint.
Read the docs
Display
Tabs
A scrollable tab bar with a sliding indicator, and its panels.
Read the docsAccordion
Collapsible sections with animated height.
Read the docsCard & Stat
Outlined, elevated and plain cards with header, body and footer, and KPI tiles.
Read the docsAvatar
Pictures, initials in any script, status dots and overlapping groups.
Read the docsAlert
Inline messages with an intent, actions and dismiss.
Read the docsBreadcrumb
A sideways-scrolling trail that collapses with the web's rules.
Read the docs
Start with one component
Add Button to an Expo app, wrap the app in KitProvider, and the rest follows the web docs you know.