MultinaireDivider

Horizontal or vertical divider line with theme-aware styling.

Basic Usage

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

<MultinaireDivider />

Props

Prop	Type	Default	Description
horizontal	boolean	true	Horizontal (default) or vertical divider
margin	SpacingProps	-	Margin spacing
thickness	number	1	Divider thickness in pixels

Examples

Horizontal Divider

<MultinaireContainer>
  <MultinaireText>Section 1</MultinaireText>
  <MultinaireDivider margin={{ vertical: 16 }} />
  <MultinaireText>Section 2</MultinaireText>
</MultinaireContainer>

Vertical Divider

<MultinaireContainer horizontal alignItems="center">
  <MultinaireText>Left</MultinaireText>
  <MultinaireDivider horizontal={false} margin={{ horizontal: 16 }} />
  <MultinaireText>Right</MultinaireText>
</MultinaireContainer>

Custom Thickness

<MultinaireDivider thickness={2} />

In a List

<MultinaireContainer>
  {items.map((item, index) => (
    <React.Fragment key={item.id}>
      <MultinaireText>{item.name}</MultinaireText>
      {index < items.length - 1 && (
        <MultinaireDivider margin={{ vertical: 8 }} />
      )}
    </React.Fragment>
  ))}
</MultinaireContainer>