Components overview
~145 accessible React Native components for the New Architecture, grouped by purpose — layout, typography, forms, buttons, overlays, navigation, display, states, media, and mobile.
MindeesUI ships ~145 components across 12 categories. Every component is type-safe, accessible by default, forwards style/native props/ref, and composes through the Layout Intelligence Layer. Need whole screens? See the @mindees/blocks package and the icon set.
Layout
Composition primitives. Use these as the structural backbone of every screen.
- Box — base primitive with size, padding, margin, background, border, radius, shadow
- Stack, HStack, VStack — auto-spacing rows and columns
- ZStack — overlapping layers
- Grid — responsive multi-column layouts
- Divider — horizontal or vertical rule
- Spacer — flexible blank space
- SafeAreaView — respects notches and home indicators
- ScreenWrapper — top-level screen container
Typography
Text primitives with semantic role and consistent rhythm.
- Text — body and inline text
- Heading — h1–h6 with semantic levels
- Subheading — secondary heading
- Paragraph — block body copy
- Caption — small descriptive text
- Label — form labels and tags
- HelperText — field hint text
- ErrorText — field error text (alert role)
- Link — accessible navigation links
- Code — inline monospace text
- Kbd — keyboard shortcut rendering
- QuoteBlock — blockquote
- Mark — highlighted inline text
- TruncatedText — line-clamped text
- ReadMore — expandable clamped text
- RichText — styled segment renderer
Forms
Form controls with built-in accessibility wiring via useFormFieldA11y.
- FormField — wraps inputs with label, help, error
- Input — single-line text input
- Textarea — multi-line text input
- PasswordInput — masked input with reveal toggle
- SearchInput — input with search affordances
- EmailInput — email keyboard and autofill hints
- PhoneInput — phone keypad and autofill hints
- NumberInput — numeric input with stepper and clamping
- CurrencyInput — localised currency formatting
- OTPInput — segmented one-time-code field
- PINInput — masked segmented PIN field
- Checkbox, CheckboxGroup — boolean and multi-select
- Radio, RadioGroup — single-select group
- Switch — on/off toggle
- Select — single-choice dropdown
- MultiSelect — multi-choice dropdown with chips
- Autocomplete — input with suggestion dropdown
- TagInput — text-to-chips tag field
- Slider — draggable single-value slider
- RangeSlider — two-thumb range slider
- DatePicker — single-date calendar picker
- DateRangePicker — start/end date picker
- TimePicker — hour/minute/period steppers
- FilePicker — gated
expo-document-pickerbutton - ImagePicker — gated
expo-image-pickerbutton
Buttons
Pressable affordances. Variant, size, and tone are tokenised.
- Button — primary actionable element
- IconButton — icon-only button with accessible label
- FAB — floating action button
- ButtonGroup — joined or spaced cluster
- SplitButton — primary action + dropdown menu
- ToggleButton — pressed/unpressed toggle
- CloseButton — dismiss affordance
- CopyButton — copy-to-clipboard with feedback
- ShareButton — native share trigger
- DownloadButton — download action
- UploadButton — upload action
- RetryButton — retry action
- BackButton — navigation back affordance
Overlays
Layers rendered above the page — most use React Native's native modal or inline positioning (no provider required).
- Modal — centered focus-trapped dialog
- Dialog — titled dialog with footer actions
- ConfirmationDialog — confirm/cancel prompt
- BottomSheet — sliding panel from below
- Drawer — slide-in side panel
- SidePanel — edge-anchored panel
- Popover — anchored floating panel
- Tooltip — short hover/long-press hint
- HoverCard — rich hover/long-press card
- Toast — transient feedback message
- Snackbar — message with an action
- Banner — inline full-width message bar
- Notification — rich notification card
- Alert — inline messaging block
- ActionSheet — bottom action menu
- DropdownMenu — anchored menu
- ContextMenu — long-press menu
- MegaMenu — multi-column menu panel
- Lightbox — fullscreen media viewer
- FullscreenOverlay — full-screen layer
- CommandPalette — Cmd-K command search
Navigation
Cross-screen and intra-screen navigation patterns.
- Tabs — segmented page switcher
- PillTabBar — 2026-style pill tab bar (segmented / floating / dock / glass)
- BottomNavigation — classic bottom tab bar
- TopBar — screen header with leading/trailing slots
- Breadcrumb — hierarchical path
- Pagination — page selector
- Stepper — multi-step flow indicator
- UserMenu — avatar account menu
- SettingsMenu — grouped settings list
- GlobalSearch — app-wide search overlay
Display
Content presentation — cards, lists, indicators, media.
- Card — surface for grouped content
- Avatar, AvatarGroup — circular user image
- Badge — small numeric or dot indicator
- Tag, Chip — label or interactive pill
- Image — accessible image with fallback
- List, ListItem — vertical list
- Accordion — collapsible sections
- Progress — linear or circular progress
- Skeleton — content placeholder
- Spinner — indeterminate loader
- Stat — labelled metric
- Rating — star rating
- Timeline — chronological list
- Pill — small toned status label
- Table — scrollable column/row table
- DataGrid — sortable, zebra-striped table
- KeyValueRow — label/value row
- DescriptionList — term/description list
- DetailView — record label/value list
- KPICard — metric card with trend delta
- Feed — avatar/title/body activity feed
- ActivityLog — compact time-stamped log
- Calendar — dependency-free month calendar
- Carousel — paged horizontal scroller
- ImageGallery — responsive image grid
- TreeView — nested expandable tree
States
Full-screen status layouts — centered icon, title, description, and optional action.
- EmptyState — "no data" placeholder
- ErrorState — error screen with retry
- OfflineState — "no internet" screen with retry
- MaintenanceState — "under maintenance" screen
- LoadingState — centered spinner with label
- SuccessState — success confirmation screen
- WarningState — cautionary screen
- InfoState — informational screen
Media
Image, video, audio, document, and scanner components. Heavy ones are gated optional peers with a MissingPeer fallback.
- ResponsiveImage — aspect-ratio-aware image
- ImagePreview — tappable image thumbnail
- FilePreview — file row with type icon
- Logo — brand logo slot
- VideoPlayer — gated
expo-video/expo-av - AudioPlayer — gated
expo-av - PDFViewer — gated
react-native-pdf - QRScanner — gated
expo-camera - BarcodeScanner — gated
expo-camera - LottieView — gated
lottie-react-native
Mobile
Touch-gesture components built on React Native's PanResponder (no extra gesture dependency).
- SwipeActions — swipe-to-reveal row actions
- SwipeableCard — swipe-to-dismiss card
- PullToRefresh — pull-to-refresh scroll view
- InfiniteScroll — list with load-more on end
Specialised
Gated peers — each renders a MissingPeer fallback with the install command when its peer dependency isn't present.
- CodeBlock — syntax-highlighted code
- ColorPicker — zero-dep hue/saturation picker
- QRCode — QR generator
- Barcode — 1D barcode generator
- MapView — gated
react-native-mapswrapper - SignaturePad — gated
react-native-signature-canvaswrapper - WebView — gated
react-native-webviewwrapper - Camera — gated
react-native-vision-camerawrapper
Migrating from React Native primitives
Replace hand-styled View, Text, and Pressable layouts with MindeesUI components. A practical, side-by-side migration guide for React Native and Expo apps.
Box
The primitive layout container — padding, margin, background, border, radius, and shadow tokens on a single View.