What is VibeKit Native?

The short version

VibeKit Native is a framework, not just a component library. The workflow:

1. Paste CLAUDE_PROMPT.md into claude.ai with your app idea.
2. Claude interviews you (6–10 questions: platforms, auth, payments, push, offline, visual reference) and generates 4 customized files.
3. You drop those 4 files plus 2 framework files into your project root.
4. You paste prompt.md into Claude Code (or any AI coding agent).
5. The agent builds the app phase by phase — installing components from the registry instead of writing them from scratch.
6. You confirm between phases. You ship.

The 65-component registry is a tool the agent uses, not the headline product. The framework is what saves you tokens, time, and design decisions.

What problem does it solve?

Three problems compound on every React Native project:

1. Token waste: AI agents generate the same login form, chat UI, product card, payment screen on every project — burning your Anthropic / OpenAI bill.
2. Time waste: Even with AI, you spend hours wiring SafeAreaView, navigation, theme tokens, form validation, list virtualization, image caching — every project.
3. Design drift: Without a coherent design system, your AI agent picks different fonts, colors, spacing, and motion timings on every screen. The app looks AI-generated.

VibeKit Native fixes all three. The planning step produces a design-style-guide.md tailored to your app + a project-phases.md blueprint. The framework files (master_prompt.md + vibekit-native-components.md) tell your AI agent which 65 production-tested components to install instead of generating, and pin the entire stack (Expo SDK 55+ · Neon Postgres · Prisma v7 · Better Auth · Expo API Routes · EAS).

Who is it for?

• Vibe coders shipping Expo apps with Claude Code, Cursor, Codex, Cline, Windsurf, Gemini, or Aider — who want a framework, not just prompts.
• Indie hackers who'd rather spend their token budget on business logic than reinventing login forms.
• Freelancers and agencies delivering multiple client apps — same locked stack, same design tokens, no per-project drift.
• Teams in East Africa who need DGateway mobile-money payments (UGX/KES/TZS/RWF) baked in instead of bolted on.

What you get

65 components across 11 categories — every screen your app needs:

• Auth: login-screen, register-screen, forgot-password-screen, verify-otp-screen, new-password-screen, complete-profile-screen — full auth flow with react-hook-form + Zod.
• Commerce: product-card, cart-item, price-display, order-card, order-timeline, product-header — ship a store in an afternoon.
• Chat: chat-bubble, chat-input, chat-list, chat-header — wire to any backend in under an hour.
• Home: hero-banner, section-header, category-circles, flash-sale-timer — every app needs a home screen.
• Profile: points-card, coupon-card — loyalty and vouchers done.
• Shared: screen-header, filter-sheet, filter-sort-bar, search-bar — shared screen patterns.
• UI: button, input, badge, avatar, card, bottom-sheet, toast, skeleton, rating, otp-input and more — interaction patterns that work.

The stack

Every component is built on a locked, AI-friendly stack:

• Expo SDK 55+ — universal native apps with OTA updates
• NativeWind v4 — Tailwind CSS for React Native
• expo-router — file-based routing
• TanStack React Query — server state and caching
• Zod + react-hook-form — type-safe validation
• Zustand — lightweight client state
• react-native-reanimated — 60fps UI thread animations

How it works

1. Open your Expo project in the terminal.
2. Run npx vibekit-native install login-screen — a ready-to-edit file drops into src/components/auth/.
3. Import and use it. Edit the JSX, tweak the NativeWind classes, wire your API.
4. Ship to the App Store and Play Store via EAS Build. Push OTA updates for the next iteration.

Why this beats writing from scratch

Every component ships with the same dark design system — indigo accent, zinc borders, 12px radius, consistent spacing. When you install LoginForm, it looks the same as ChatBubble and ProductCard. No theme drift, no style mismatches, no "this button has different radius on this screen" bugs.

And because every component is a plain TypeScript file in your project, you own it completely. No registry lock-in, no black box, no dependency on a CDN. Delete the file, or edit it — it's your code.

Is it free?

Yes. MIT licensed, open source, and free to use. No paid tiers, no pro plan, no feature gating. You'll pay for the services your app uses (Expo EAS Build credits, Neon database, Better Auth — most have generous free tiers).

Where do I start?

Run npx vibekit-native in any Expo project to launch the interactive CLI, or read the quickstart guide for step-by-step setup.