Components overview

~60 accessible React Native components for the New Architecture, grouped by purpose. Layout, typography, forms, buttons, overlays, navigation, display, and specialised.

MindeesUI ships ~60 components across 8 categories. Every component is type-safe, accessible by default, and composable through the Layout Intelligence Layer.

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
Caption — small descriptive text
Label — form labels and tags
Link — accessible navigation links
Code — inline monospace text
Kbd — keyboard shortcut rendering

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
Checkbox, CheckboxGroup — boolean and multi-select
Radio, RadioGroup — single-select group
Switch — on/off toggle

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

Overlays

Layers rendered above the page through the PortalProvider.

Modal — centered focus-trapped dialog
BottomSheet — sliding panel from below
Drawer — slide-in side panel
Popover — anchored floating panel
Tooltip — short hover/long-press hint
Toast — transient feedback message
Alert — inline messaging block
ActionSheet — bottom action menu

Cross-screen and intra-screen navigation patterns.

Tabs — segmented page switcher
PillTabBar — 2026-style pill tab bar (segmented / floating / dock / glass)
TopBar — screen header with leading/trailing slots
Breadcrumb — hierarchical path
Pagination — page selector
Stepper — multi-step flow indicator

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

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-maps wrapper
SignaturePad — gated react-native-signature-canvas wrapper
WebView — gated react-native-webview wrapper
Camera — gated react-native-vision-camera wrapper