Separator

<div style="width: 100%; max-width: 300px; margin: 0 15px;">
  <div class="DemoText" style="font-weight: 500;">Essence UI</div>
  <div class="DemoText">An open-source UI component library.</div>
  <Separator.separator class="DemoSeparatorRoot" style="margin: 15px 0;" />
  <div style="display: flex; height: 20px; align-items: center;">
    <div class="DemoText">Blog</div>
    <Separator.separator
      class="DemoSeparatorRoot"
      decorative
      orientation="vertical"
      style="margin: 0 15px;"
    />
    <div class="DemoText">Docs</div>
    <Separator.separator
      class="DemoSeparatorRoot"
      decorative
      orientation="vertical"
      style="margin: 0 15px;"
    />
    <div class="DemoText">Source</div>
  </div>
</div>

.DemoSeparatorRoot {
	background-color: var(--violet-6);
}
.DemoSeparatorRoot[data-orientation="horizontal"] {
	height: 1px;
	width: 100%;
}
.DemoSeparatorRoot[data-orientation="vertical"] {
	height: 100%;
	width: 1px;
}

.DemoText {
	color: white;
	font-size: 15px;
	line-height: 20px;
}