Divider

Horizontal or vertical divider line with theme-aware styling.

Basic Usage

import { Divider } from '@multinaire/ui';

<Divider />

Props

Prop	Type	Default	Description
horizontal	boolean	false	Set to true to render a vertical divider instead of horizontal
margin	SpacingProps	—	Margin around the divider
thickness	number	1	Thickness of the divider line in pixels

Examples

Horizontal Divider

<Container>
  <Typography>Section 1</Typography>
  <Divider margin={{ vertical: 16 }} />
  <Typography>Section 2</Typography>
</Container>

Vertical Divider

<Container horizontal alignItems="center">
  <Typography>Left</Typography>
  <Divider horizontal={false} margin={{ horizontal: 16 }} />
  <Typography>Right</Typography>
</Container>

Custom Thickness

<Divider thickness={2} />

In a List

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