Plan with claude.ai, then your AI agent (Claude Code, Cursor, Codex, Cline, Windsurf, Gemini, Aider) builds the app phase by phase — installing the right components from a 65-component registry as it goes. You save tokens, time, and design decisions. Powered by Expo, Neon, Prisma v7, and Better Auth.
Install component
Don't have an account? Sign up
Eleven specific pains that slow down every React Native project — and how VibeKit Native makes each one disappear with a single npx command.
Every new project means re-building the same screens — login, profile, product cards, chat bubbles — one painful file at a time.
npx vibekit-native install drops production-ready components into your project. Auth, commerce, chat — all pre-built, all dark-themed.
Hours of copying SafeAreaView, StatusBar, NavigationContainer, ThemeProvider — before writing a single line of actual app code.
Every component handles its own providers, safe areas, and theme tokens. Import and go. Zero boilerplate.
Cards, buttons, and inputs look different on every screen. Font sizes drift. Spacing is a mess.
A unified dark-only design system with CSS variables. Every component uses the same tokens — install any component, it fits your app instantly.
Building login, signup, password reset, OTP verification, and social auth from scratch — each with edge cases you'll miss.
Pre-built auth components (login-form, signup-form, forgot-password, otp-verify) with react-hook-form + Zod validation built in. Install in one command.
AI agents don't know your project structure. Every session starts with context-building instead of actual feature work.
A locked Expo stack with clear conventions. AI agents read the registry, understand the patterns, and ship features without guessing.
Setting up tRPC, REST endpoints, secure token storage, and cache invalidation — across iOS, Android, and web.
Better Auth for auth, TanStack Query for data, Expo API Routes for backend, expo-secure-store for tokens. Installed and wired in minutes.
Writing color tokens, theme context, persistent preferences, and system-preference detection — for every project.
Dark-only by design. Every component ships with the complete dark palette. No theme switching, no light mode bugs, no conditional styles.
Product cards, grids, detail pages, cart views, checkout forms, order summaries — a full e-commerce UI from zero.
Eight commerce components — product-card, product-grid, product-detail, cart-view, checkout-form, order-summary, wishlist-button, review-card. Ship a store in an afternoon.
Message bubbles, input bars, conversation lists, typing indicators, scroll-to-bottom — every chat needs the same 5 components.
chat-bubble, chat-input, chat-list, chat-header — install all four and wire them to your backend in under an hour.
AsyncStorage for everything — tokens, user data, product catalogs, chat history. No queries, no relations, no migrations. Data lost on reinstall.
VibeKit Native components are agnostic to your data layer. Use TanStack Query with any REST/GraphQL API, Zustand for local state, or bring your own database — Supabase, Firebase, or a custom backend. The components just render UI.
EAS Build config, app signing, store listings, review guidelines, OTA updates — the barrier between finished code and shipped app.
Build-deploy guide with EAS configuration files included. PnP dev builds, app store submission checklists, and OTA update setup ready to go.
The framework hands your AI agent (Claude Code, Cursor, Codex, Cline, Windsurf, Gemini, Aider) a registry reference. As it builds your app phase by phase, it installs the matching components instead of writing screens from scratch — saving you tokens, time, and design decisions. Each component drops in as a single editable file. You can also browse + install manually if you want.
65 components across 11 categories · Install individually, all compatible together
Three steps from zero to a production React Native app. No boilerplate, no config, no context providers to wrap.
Browse the registry, pick a component, and install it with one command. Every component drops into your Expo project as a single editable file — no wrapper providers, no config changes, no bloat.
Every installed component is a plain TypeScript file in your project — no black box, no registry lock-in. Edit the JSX, tweak the NativeWind classes, wire your API. It's your code from the first install.
Run EAS Build, submit to the App Store and Google Play. Every component is production-tested on iOS and Android. Push OTA updates with expo-updates. No surprises at review time.
See the terminal demo below for what step 1 looks like in real time
One command drops a production-ready component into your project. Import it, wire your data, and see it live.
import { LoginScreen } from "@/src/components/auth/login-screen";
export default function SignInScreen() {
return (
<LoginScreen
onLogin={(data) =>
console.log(data.email, data.password)
}
/>
);
}Live on device
VibeKit Native is a planning + build framework for AI-driven mobile development. The component registry is one tool the agent uses; the framework is what saves you the tokens, time, and design decisions.
Your AI agent installs from a 65-component registry instead of generating screens from scratch. The agent reads the registry reference, picks the matching component, runs npx vibekit-native install — done. 60–80% token reduction per build.
Paste the planning prompt into claude.ai, answer 6–10 questions, get 4 customized files (project-description, project-phases, design-style-guide, prompt). Then your AI agent builds phase by phase against that spec.
Claude generates a fully tailored design-style-guide.md from your visual reference (Dribbble link, competitor app). Your AI agent enforces it across every screen — fonts, colors, spacing, motion, all consistent.
Auth, commerce, chat, payments (DGateway + Stripe), dashboards, charts, navigation, biometrics, barcode scanner — every screen your app needs. Each installs as a single editable file. The agent picks; you can also browse manually.
Expo SDK 55+ · Neon Postgres · Prisma v7 · Better Auth + Expo plugin · Expo API Routes · EAS Build/Submit/Update/Hosting. The framework keeps your AI agent on-stack via master_prompt.md + a dependency blocklist.
Every component runs on Hermes, animates on the UI thread via Reanimated, recycles list rows via FlashList, and loads images through expo-image with disk cache + blurhash. Cold start under 2s on iPhone 12.
5 phases: Foundation → Core screens → API Routes → Polish → Deploy. Your AI agent stops between phases and waits for your confirmation. You stay in control without writing the boilerplate.
Claude Code, Cursor, Codex CLI, Cline, Windsurf, Gemini CLI, Aider — one-line install drops the framework rules into your agent's auto-load path. No copy-pasting prompts.
Every component ships with the same opinionated stack so AI never has to invent — and you never have to debug a dependency mismatch.
| Layer | Technology | Why |
|---|---|---|
| Framework | Expo SDK 55+ / React Native 0.83 | Universal native apps with OTA updates and file-based routing |
| Language | TypeScript 5.9 | Type safety, better DX with AI agents |
| Styling | NativeWind v4 | Tailwind CSS for React Native — utility-first, AI-friendly |
| Navigation | expo-router | File-based routing, same mental model as Next.js |
| Forms & Validation | react-hook-form + Zod | Type-safe form validation on every input |
| Client State | Zustand | Lightweight client state — no boilerplate |
| Server State | TanStack React Query | Server state, caching, pagination, optimistic updates |
| Icons | @expo/vector-icons (Ionicons) | 5,000+ icons out of the box, zero setup |
| Images | expo-image | Optimized image loading with caching |
| Animations | react-native-reanimated | 60fps animations on the UI thread |
| Lists | @shopify/flash-list | High-performance lists for large data sets |
| Secure Storage | expo-secure-store | Encrypted token storage |
| Push Notifications | expo-notifications | Native push notifications, iOS and Android |
| Components | VibeKit Native Registry | Install production-ready RN components via npx |
| Deployment | EAS Build + App Store / Play Store | Build, sign, submit, and OTA update from one CLI |
All components use NativeWind v4 with the shared dark design system tokens. Each component is a single plain TypeScript file that drops into your project — no provider wrappers, no config changes, no vendor lock-in.
When following the framework workflow, your AI agent runs these commands automatically as it builds. The reference below is for advanced users who want to install manually, debug, or list what's available.
| Command | Description |
|---|---|
| npx vibekit-native | Launch the interactive CLI menu |
| npx vibekit-native list | View all 42 available components grouped by category |
| npx vibekit-native install <name> | Install a component into your Expo project |
| npx vibekit-native install auth | Install all auth components (login-screen, register-screen, forgot-password-screen, etc.) |
| npx vibekit-native install commerce | Install all commerce components (product-card, cart-item, order-card, etc.) |
| npx vibekit-native install chat | Install all chat components (chat-bubble, chat-input, chat-list, chat-header) |
| npx vibekit-native install profile | Install all profile components (points-card, coupon-card) |
| npx vibekit-native install ui | Install all UI primitives (button, input, card, toast, skeleton, etc.) |
| npx vibekit-native install home | Install all home screen components (hero-banner, section-header, etc.) |
| npx vibekit-native install payments | Install DGateway payment + subscription screens (mobile money UGX/KES/TZS/RWF + Stripe) |
| npx vibekit-native install nav | Install bottom-tabs and app-drawer navigation |
| npx vibekit-native install dashboard | Install dashboard primitives (stat-card, dashboard-shell, data-table) |
button, input, badge, avatar, card, bottom-sheet, toast, rating, skeleton, otp-input, and more
product-card, cart-item, price-display, order-card, order-timeline, product-header, wishlist-button, review-card, order-summary, checkout-form
login-screen, register-screen, verify-otp-screen, forgot-password-screen, new-password-screen, complete-profile-screen
hero-banner, section-header, category-circles, flash-sale-timer
screen-header, filter-sheet, filter-sort-bar, search-bar
chat-bubble, chat-input, chat-list, chat-header
mobile-money-pay-screen, payment-status-screen, subscription-plan-card, subscription-manage-screen, stripe-pay-button, stripe-subscription-button, use-payment-status
bottom-tabs, app-drawer
stat-card, dashboard-shell, data-table, chart-line, chart-bar, chart-pie
points-card, coupon-card
Install categories with npx vibekit-native install <category> or pick individual components. Files are written to src/components/<category>/.
EAS Build handles everything from native compilation to store submission. OTA updates mean most changes never need a store review cycle.
Run your app with EAS dev builds on a real device or simulator. Hot reload, native modules, and full Expo SDK access — no cloud build needed for day-to-day work.
EAS Submit handles the entire store submission flow — screenshots, metadata, signing, and review. One command deploys to both stores simultaneously.
Push JavaScript updates instantly with expo-updates. Fix bugs, ship new screens, update dependencies — all without going through app store review. Users get updates on next app open.
Configure builds once in eas.json — development, preview, and production profiles. Auto-increment build numbers, manage Android keystores and iOS certificates from the CLI.
65 production-ready React Native components across 11 categories. Your AI agent reads vibekit-native-components.md and picks the matching component for every screen — instead of writing it from scratch. You can also browse and install manually.
VibeKit Native is used by indie hackers, founders, and agencies shipping React Native apps across East Africa and beyond — anyone who'd rather install than write from scratch.
“Skeleton loading, toast notifications, and a login form in three commands. Never writing a modal from scratch again. This is what RN should have shipped with.”
“We built our farmer marketplace app in 5 days. Product cards, chat, checkout — all from the registry. The dark design system saved us weeks of UI decisions.”
“I've been writing React Native for 4 years. The expo-router setup + Better Auth integration alone would've taken me a full weekend. VibeKit Native did it in 20 minutes.”
“The dark-only design system finally killed the light mode bugs in my apps. Every component just fits. No theme switching, no broken contrast ratios.”
“I used to dread building chat UIs in Expo. Now I install chat-bubble, chat-list, and chat-input — wire them to my Supabase backend — done. Three hours saved.”
“Skeleton loading, toast notifications, and a login form in three commands. Never writing a modal from scratch again. This is what RN should have shipped with.”
“We built our farmer marketplace app in 5 days. Product cards, chat, checkout — all from the registry. The dark design system saved us weeks of UI decisions.”
“I've been writing React Native for 4 years. The expo-router setup + Better Auth integration alone would've taken me a full weekend. VibeKit Native did it in 20 minutes.”
“The dark-only design system finally killed the light mode bugs in my apps. Every component just fits. No theme switching, no broken contrast ratios.”
“I used to dread building chat UIs in Expo. Now I install chat-bubble, chat-list, and chat-input — wire them to my Supabase backend — done. Three hours saved.”
“First time I built a mobile app solo. Auth, profile, and a product grid installed in under 10 commands. Published to the App Store on day 7.”
“The login-form component ships with react-hook-form and Zod baked in. No wiring, no boilerplate. Our AI agent reads the pattern and extends it immediately.”
“Switched from hand-rolling NativeWind classes to VibeKit Native components. The design consistency across screens is night and day. Same radius, same spacing, same indigo.”
“Onboarded two junior devs with VibeKit Native instead of a 30-page style guide. They shipped a settings screen on day one. The components ARE the documentation.”
“Shipped my social app's chat feature in an afternoon. Four components, one backend hook, zero styling decisions. npx vibekit-native install chat — that's it.”
“First time I built a mobile app solo. Auth, profile, and a product grid installed in under 10 commands. Published to the App Store on day 7.”
“The login-form component ships with react-hook-form and Zod baked in. No wiring, no boilerplate. Our AI agent reads the pattern and extends it immediately.”
“Switched from hand-rolling NativeWind classes to VibeKit Native components. The design consistency across screens is night and day. Same radius, same spacing, same indigo.”
“Onboarded two junior devs with VibeKit Native instead of a 30-page style guide. They shipped a settings screen on day one. The components ARE the documentation.”
“Shipped my social app's chat feature in an afternoon. Four components, one backend hook, zero styling decisions. npx vibekit-native install chat — that's it.”
I'm Muke Johnbaptist, founder of Desishub Technologies in Kampala, Uganda. I specialize in AI engineering, Go (Golang) backend development, and designing systems across mobile, desktop, and web. I'm also the creator of the Grit Framework.
VibeKit Native is what I wished existed when I started building React Native apps with AI. Every new project meant rewriting login screens, profile layouts, and product cards. So I built a registry of production-ready components — installable with one npx command, dark-only, and designed to work with any AI coding agent.
Every component is battle-tested in real client Expo projects and my own apps. Login forms, chat UIs, product grids — all shipping in production on iOS and Android.
Built a reusable React Native component — auth flow, chat UI, commerce widget, UI primitive? Open a pull request. Once merged, your component ships with every npx vibekit-native install and is available to every developer using the registry.
{
slug: "your-component",
name: "Your Component",
category: "commerce",
install: "npx vibekit-native install ...",
features: [...],
filesAdded: [...],
}Indie hackers, freelancers, founders — we trade screenshots of our Expo apps, debug NativeWind layouts together, and share which components ship fastest. Drop in to ask anything.
Install production-ready React Native components into any Expo project. Dark-only, AI-optimized, and completely yours to edit.