Skip to main content

Introduction

Multinaire UI is a comprehensive UI component library for building beautiful, consistent mobile and web applications with Expo and React Native.

Features​

  • 40+ UI Components - Buttons, inputs, modals, navigation, and more
  • Theme System - Light/dark mode with customizable colors, typography, and spacing
  • Cross-Platform - Works on iOS, Android, and Web
  • TypeScript First - Full type safety with comprehensive type definitions
  • i18n Support - Built-in internationalization with react-i18next
  • Responsive Design - Utilities for mobile, tablet, and desktop layouts
  • 53 Icons - Curated icon set for common UI patterns

Quick Start​

Starting a new project? Scaffold one pre-configured with everything below:

npx @multinaire/create-app my-app

See Templates for details. Adding the library to an existing app:

npm install @multinaire/expo-ui

Wrap your app with the provider:

import MultinaireUI from '@multinaire/expo-ui';

export default function App() {
  return <MultinaireUI>{/* Your app */}</MultinaireUI>;
}

Use components:

import {
  Button,
  Typography,
  Container,
} from '@multinaire/expo-ui';

function MyScreen() {
  return (
    <Container flex={1}>
      <Typography type="heading" weight="bold">
        Welcome!
      </Typography>
      <Button
        type="primary"
        title="Get Started"
        onPress={() => console.log('Pressed!')}
      />
    </Container>
  );
}

Design Principles​

1. Consistency​

All components follow the same design language and use shared theme tokens for colors, spacing, and typography.

2. Accessibility​

Components are designed with accessibility in mind, supporting proper contrast ratios and touch targets.

3. Performance​

Built with performance in mind, using React Native's best practices and optimized rendering.

4. Flexibility​

Highly customizable through the theme system while maintaining sensible defaults.

Next Steps​