Skip to main content

Introduction

Multinaire Design is a comprehensive design system 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​

npm install @multinaire/multinaire-design

Wrap your app with the provider:

import { MultinaireDesignProvider } from '@multinaire/multinaire-design';

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

Use components:

import {
  MultinaireButton,
  MultinaireText,
  MultinaireContainer,
} from '@multinaire/multinaire-design';

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

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​