Components Overview

Multinaire Design provides 40+ UI components organized into 6 categories.

Categories

Buttons

Interactive elements for user actions.

Component	Description
MultinaireButton	Primary action button with variants
MultinaireIconButton	Icon-only button
MultinaireActionButton	Button with icon and label
MultinaireMenuButton	List item style button
MultinaireSocialLoginButton	OAuth login buttons
MultinaireFloatingActionButton	FAB component

Common

Basic building blocks for layouts and content.

Component	Description
MultinaireText	Theme-aware text with i18n
MultinaireIcon	SVG icon component
MultinaireCard	Card container with shadow
MultinaireContainer	Flexible layout container
MultinaireImage	Image component
MultinaireAvatar	Circular avatar with initials fallback
MultinaireDivider	Horizontal/vertical divider
MultinaireLoading	Loading skeleton
MultinaireGap	Spacing component

Inputs

Form controls and user input components.

Component	Description
MultinaireInput	Text input field
MultinaireCheckbox	Checkbox control
MultinairePickerButton	Dropdown trigger
MultinaireMediaPickerButton	Image/media picker

Layouts

Container and scrolling components.

Component	Description
MultinaireScrollView	Scrollable container
MultinaireListView	FlatList with loading states
MultinairePageView	Swipeable page view
MultinaireTabView	Tab content container
MultinairePagination	Page indicators

Modals

Overlay and dialog components.

Component	Description
MultinaireModal	Base modal (sheet/dialog)
MultinaireDialog	Confirmation dialog
MultinaireListPicker	Selection modal
MultinaireDateTimePicker	Date/time picker
MultinaireMenu	Context menu

Navigation

Navigation and header components.

Component	Description
MultinaireStackHeader	Stack navigation header
MultinaireTabBar	Tab bar for navigation
MultinaireSideBar	Desktop sidebar

Common Props

Most components share these props:

Spacing

<MultinaireContainer
  margin={16}                    // All sides
  margin={{ horizontal: 16 }}   // Left and right
  margin={{ top: 8, bottom: 16 }} // Individual sides
  padding="medium"              // Using variable size
/>

Sizing

<MultinaireButton
  flex={1}
  width={200}
  height="medium"
/>

Colors

<MultinaireText color="primary" />
<MultinaireContainer backgroundColor="backgroundVariant" />

Quick Example

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

function WelcomeCard() {
  const { variables } = useMultinaireTheme();

  return (
    <MultinaireCard margin={variables.padding.medium}>
      <MultinaireContainer padding="medium" gap="medium">
        <MultinaireText type="heading" weight="bold">
          Welcome!
        </MultinaireText>
        <MultinaireText type="body" color="neutral">
          Get started with Multinaire Design
        </MultinaireText>
        <MultinaireButton
          type="primary"
          title="Get Started"
          onPress={() => {}}
        />
      </MultinaireContainer>
    </MultinaireCard>
  );
}