The catalog your AI agent installs from.
When you follow the framework workflow, your AI agent reads vibekit-native-components.md and picks the matching component for every screen — installing it instead of writing from scratch. You can also browse here and run npx vibekit-native install <name> directly.
Button
Dark-only pressable button with primary, secondary, ghost, destructive, and text variants. Loading spinner, icons via Ionicons, and full-width support.
Input
Dark-only text input with label, error, leading icon, and password visibility toggle.
Badge
Compact status badge with solid, outline, and subtle variants for tags, counts, and labels.
Avatar
Circular avatar with image, fallback initials, and online status dot.
Card
Elevated dark card container with optional header, body, and footer sections.
Bottom Sheet
Modal bottom sheet with backdrop, drag handle, snap points, and smooth open/close animation.
Empty State
Empty state with icon, title, message, and optional action button for zero-data screens.
Loading Spinner
Full-screen or inline loading spinner with ActivityIndicator and optional overlay message.
Toast
Animated toast notifications with success, error, warning, and info variants.
Rating
Interactive star rating with half-star precision, touch selection, and display-only mode.
Custom Radio
Styled radio button group with animated selection indicator and vertical/horizontal layout.
Divider
Thin horizontal or vertical divider line with optional label inset.
Skeleton
Pulsing placeholder shapes for card, text, avatar, and custom layouts during loading.
Searchable Select
Modal searchable picker with type-to-filter, label display, and multi-select support.
Countdown Timer
Countdown timer displaying days, hours, minutes, and seconds with colon-separated format.
OTP Input
One-time password input with individual digit boxes, auto-advance, and paste support.
Product Card
Product card with optimized image, price, rating, badge overlay, and wishlist/add-to-cart actions.
Cart Item
Cart line item with image, title, quantity stepper, unit price, total, and remove action.
Price Display
Price display with currency formatting, compare-at strikethrough, discount percentage badge, and configurable size.
Order Card
Order summary card with ID, date, status badge, item previews, total, and reorder action.
Order Timeline
Vertical timeline showing order status progression with icons, dates, and completion states.
Product Header (Detail)
Full product detail header with image gallery, color/size selector, wishlist, and sticky add-to-cart.
Login Screen
Login screen with email/password form, validation (zod + react-hook-form), social buttons, and navigation links.
Register Screen
Registration screen with name, email, password fields, zod validation, and social sign-up options.
Verify OTP Screen
OTP verification screen with 6-digit code input, resend timer, and email display.
Forgot Password Screen
Forgot password screen with email input, validation, and submit action for reset link.
New Password Screen
New password creation screen with strength validation, confirm password, and submit.
Complete Profile Screen
Post-registration profile completion with avatar upload, username, phone, and date of birth fields.
Hero Banner
Full-width hero banner with autoplay carousel, gradient overlays, action buttons, and dot indicators.
Section Header
Section header with title, optional subtitle, and see-all action link.
Category Circles
Horizontal scrollable row of circular category icons with labels.
Flash Sale Timer
Flash sale section header with live countdown timer and product preview strip.
Screen Header
App screen header with back button, title, and optional right action buttons.
Filter Sheet
Bottom sheet filter panel with multi-select options, clear all, and apply actions.
Filter & Sort Bar
Horizontal toolbar with filter and sort buttons, active filter count badge, and modal pickers.
Search Bar
Rounded search input with clear button, optional camera/scanner icon, and submit handler.
Chat Bubble
Chat message bubble with own/other alignment, text, time, and read status.
Chat Input
Multiline message composer with attach + send and KeyboardAvoidingView.
Chat List
Inverted FlatList of messages with pull-to-refresh and pagination.
Chat Header
Conversation header with avatar, online status, and call/video/more actions.
Points Card (Loyalty)
Loyalty points card with balance, tier progress bar, tier name, and history action.
Coupon / Voucher Card
Discount coupon card with left accent bar, code, description, expiry, and apply action.
Mobile Money Pay Screen
Pay screen for East African mobile money (UGX, KES, TZS, RWF) — starts a DGateway STK push via your backend.
Payment Status Screen
Post-STK-push polling screen with "Check your phone" UX, 5s cadence, 5-minute ceiling.
Subscription Plan Card
Selectable subscription plan with price, interval, trial badge, features, and highlight variant.
Subscription Manage Screen
Active subscription view — plan, state badge, past-due banner, next charge, cancel flow.
Bottom Tabs
Custom tab bar with active state, icon swap, numeric + dot badges, and safe-area inset.
App Drawer
Animated left-edge drawer — header, items with icons + badges, dividers, destructive variant.
Stat Card
KPI card with label, value, unit, delta % (up/down), and optional sparkline.
Dashboard Shell
Scrollable dashboard layout with eyebrow + title + actions header, greeting strip, stats row.
Data Table
Horizontally scrollable, sortable mobile data table with custom cell renderers.
Chart Line
Smooth area-fill line chart with comparison series, pointer tooltip, and themed dark palette.
Chart Bar
Vertical bar chart with rounded tops, gradient fill, optional value labels, and rotated x labels.
Chart Pie
Donut or pie chart with center label, rotating accent palette, and percentage legend.
Stripe Pay Button
One-time Stripe PaymentSheet button. Mints a PaymentIntent on your backend, opens the native sheet.
Stripe Subscription Button
Subscription PaymentSheet — handles both trial (SetupIntent) and charge-now (PaymentIntent) flows.
Wishlist Button
Animated heart toggle for wishlists — floating variant for over-image overlay, three sizes.
Review Card
Customer review with avatar, verified badge, half-star rating, title/body, and helpful CTA.
Order Summary
Line items + subtotal / shipping / tax / discount breakdown and grand total.
Checkout Form
Full checkout flow — contact, shipping address, and payment method picker. Zod-validated.