Components Overview

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

Categories

Buttons

Interactive elements for user actions.

Component	Description
Button	Primary action button with variants
IconButton	Icon-only button
ActionButton	Button with icon and label
MenuButton	List item style button
SocialLoginButton	OAuth login buttons
FloatingActionButton	FAB component

Common

Basic building blocks for layouts and content.

Component	Description
Typography	Theme-aware text with i18n
Icon	SVG icon component
Card	Card container with shadow
Container	Flexible layout container
Photo	Image component
Avatar	Circular avatar with initials fallback
Divider	Horizontal/vertical divider
Animate	Loading skeleton
Gap	Spacing component

Inputs

Form controls and user input components.

Component	Description
Input	Text input field
Checkbox	Checkbox control
Toggle	Toggle switch control
PickerButton	Dropdown trigger
MediaPickerButton	Image/media picker

Layouts

Container and scrolling components.

Component	Description
ScrollContainer	Scrollable container
ListContainer	FlatList with loading states
PageContainer	Swipeable page view
TabContainer	Tab content container
Pagination	Page indicators

Modals

Overlay and dialog components.

Component	Description
Popup	Base modal (sheet/dialog)
Dialog	Confirmation dialog
ListPicker	Selection modal
DateTimePicker	Date/time picker
Menu	Context menu

Navigation

Navigation and header components.

Component	Description
StackHeader	Stack navigation header
TabBar	Tab bar for navigation
SideBar	Desktop sidebar

Common Props

Most components share these props:

Spacing

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

Sizing

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

Colors

<Typography color="primary" />
<Container backgroundColor="backgroundVariant" />

Quick Example

import {
  Container,
  Typography,
  Button,
  Card,
  useTheme,
} from '@multinaire/ui';

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

  return (
    <Card margin={variables.padding.medium}>
      <Container padding="medium" gap="medium">
        <Typography type="heading" weight="bold">
          Welcome!
        </Typography>
        <Typography type="body" color="neutral">
          Get started with Multinaire UI
        </Typography>
        <Button
          type="primary"
          title="Get Started"
          onPress={() => {}}
        />
      </Container>
    </Card>
  );
}