Components Overview

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

Categories

Buttons

Interactive elements for user actions.

Component	Description
Button	Primary action button with variants
IconButton	Icon-only button
ToggleIconButton	Compact icon-only button with a selected state
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
Accordion	Collapsible panel with animated header
Placeholder	Empty-state block with graphic, text, and action

Inputs

Form controls and user input components.

Component	Description
Input	Text input field
AutoCompleteInput	Text input with a suggestion dropdown
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
StaticListContainer	Non-scrolling list for nesting in a scroller
SortableContainer	Drag-to-reorder list
SortableItem	Draggable row wrapper used by SortableContainer
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

Markdown

Theme-aware markdown renderers and editors.

Component	Description
MarkdownTypography	Native markdown rendering via react-native-enriched-markdown
MarkdownInput	Rich text editor that reads and writes markdown
MarkdownToolbar	Formatting toolbar for MarkdownInput

Common Props

Most components share these props:

Spacing

margin and padding take a number, a symmetric pair, or individual sides — never a token name. Read the number off the theme so spacing stays consistent:

const { variables } = useTheme();

<Container
  margin={variables.padding.medium}         // All sides
  margin={{ horizontal: 16 }}               // Left and right
  margin={{ top: 8, bottom: 16 }}           // Individual sides
  padding={variables.padding.medium}
/>

Sizing

width and height are dimensions, not size tokens:

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

Colors

Color props are the exception: they take the token name, and the component resolves it against the active mode.

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

Quick Example

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

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

  return (
    <Card margin={variables.padding.medium}>
      <Container
        padding={variables.padding.medium}
        gap={variables.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>
  );
}