Separator

The Separator component provides a visual divider between content sections.

Preview

Content above

---

Content below

Import

import { Separator } from 'meridian';

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	horizontal	Direction of the separator line

Usage

Basic (Horizontal)

<Separator />

Horizontal Separator

The default orientation is horizontal:

<div>
  <Heading level={3}>Section One</Heading>
  <Text>Content for section one.</Text>
</div>
<Separator />
<div>
  <Heading level={3}>Section Two</Heading>
  <Text>Content for section two.</Text>
</div>

Horizontal

Section One

Content for section one.

---

Section Two

Content for section two.

Vertical Separator

Use orientation="vertical" for side-by-side content:

<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', height: '40px' }}>
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

Vertical

Option A

---

Option B

---

Option C

In Navigation

<nav style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <a href="/">Home</a>
  <Separator orientation="vertical" />
  <a href="/docs">Docs</a>
  <Separator orientation="vertical" />
  <a href="/components">Components</a>
</nav>

Spacing Sections

Use separators to create visual breaks in long content:

<article>
  <Heading level={2}>Introduction</Heading>
  <Text>Opening content...</Text>

  <Separator />

  <Heading level={2}>Main Content</Heading>
  <Text>Main body...</Text>

  <Separator />

  <Heading level={2}>Conclusion</Heading>
  <Text>Closing content...</Text>
</article>