Getting Started

MindeesUI is a universal React Native + Expo UI component library for the New Architecture (Fabric + JSI + TurboModules + Bridgeless). Ships on iOS, Android, and React Native Web from one codebase, with TypeScript strict types, WCAG 2.2 AA accessibility, Reanimated v4 UI-thread animations, and Unistyles v3 zero-re-render theming.

The differentiator is a deterministic Layout Intelligence Layer: components introspect their children and auto-adjust spacing, sizing, alignment, accessibility roles, and styling. Every rule is documented and overridable — never a black box.

Install

pnpm add @mindees/ui @mindees/tokens @mindees/icons

# New-Architecture peers
pnpm add react-native-reanimated react-native-gesture-handler react-native-unistyles \
  react-native-nitro-modules react-native-edge-to-edge react-native-safe-area-context \
  react-native-svg @shopify/flash-list

Full setup walkthrough: Installation.

Wrap your app

import { ThemeProvider, PortalProvider, ErrorBoundary, configureUnistyles } from '@mindees/ui';

configureUnistyles();

export default function App() {
  return (
    <ThemeProvider mode="auto">
      <PortalProvider>
        <ErrorBoundary>{/* your screens */}</ErrorBoundary>
      </PortalProvider>
    </ThemeProvider>
  );
}

Build a screen

import { ScreenWrapper, Stack, Heading, Text, Button, FormField, Input, Card } from '@mindees/ui';

export function SignInScreen() {
  return (
    <ScreenWrapper padding="lg" scroll avoidKeyboard>
      <Stack gap="md">
        <Heading level={1}>Welcome back</Heading>
        <Text tone="muted">Sign in to continue.</Text>

        <Card variant="outlined">
          <Stack gap="md">
            <FormField label="Email" required>
              <Input keyboardType="email-address" autoCapitalize="none" />
            </FormField>
            <FormField label="Password" required>
              <Input secureTextEntry />
            </FormField>
            <Button variant="primary" fullWidth>
              Sign in
            </Button>
          </Stack>
        </Card>
      </Stack>
    </ScreenWrapper>
  );
}

That snippet exercises the Layout Intelligence Layer: the Stack reads its children's tags (Heading, Text, Card) and applies the appropriate per-pair gap. FormField publishes a FormFieldContext so Input automatically wires accessibilityLabelledBy. Card densities + variants flow through context to nested children.

What's next

• Installation — full setup for Expo / bare RN / RN Web
• Compatibility — peer matrix + supported SDK versions
• Architecture — the Layout Intelligence Layer rules
• Theming — createTheme, dark mode, high contrast, custom brands
• Providers — ThemeProvider, PortalProvider, ErrorBoundary
• Components — ~60 components organised by domain