Separator

<div>
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
  </div>
  <%= render "ui/separator", classes: "my-4" %>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <%= render "ui/separator", orientation: :vertical %>
    <div>Docs</div>
    <%= render "ui/separator", orientation: :vertical %>
    <div>Source</div>
  </div>
</div>

<div>
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
  </div>
  <%= render UI::Separator.new(classes: "my-4") %>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <%= render UI::Separator.new(orientation: :vertical) %>
    <div>Docs</div>
    <%= render UI::Separator.new(orientation: :vertical) %>
    <div>Source</div>
  </div>
</div>

<div>
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
  </div>
  <%= render UI::SeparatorComponent.new(classes: "my-4") %>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <%= render UI::SeparatorComponent.new(orientation: :vertical) %>
    <div>Docs</div>
    <%= render UI::SeparatorComponent.new(orientation: :vertical) %>
    <div>Source</div>
  </div>
</div>

<div class="space-y-4 max-w-md">
  <div>
    <h3 class="text-lg font-medium">Section 1</h3>
    <p class="text-sm text-muted-foreground">This is the first section content.</p>
  </div>
  <%= render "ui/separator" %>
  <div>
    <h3 class="text-lg font-medium">Section 2</h3>
    <p class="text-sm text-muted-foreground">This is the second section content.</p>
  </div>
  <%= render "ui/separator" %>
  <div>
    <h3 class="text-lg font-medium">Section 3</h3>
    <p class="text-sm text-muted-foreground">This is the third section content.</p>
  </div>
</div>

<div class="space-y-4 max-w-md">
  <div>
    <h3 class="text-lg font-medium">Section 1</h3>
    <p class="text-sm text-muted-foreground">This is the first section content.</p>
  </div>
  <%= render UI::Separator.new %>
  <div>
    <h3 class="text-lg font-medium">Section 2</h3>
    <p class="text-sm text-muted-foreground">This is the second section content.</p>
  </div>
  <%= render UI::Separator.new %>
  <div>
    <h3 class="text-lg font-medium">Section 3</h3>
    <p class="text-sm text-muted-foreground">This is the third section content.</p>
  </div>
</div>

<div class="space-y-4 max-w-md">
  <div>
    <h3 class="text-lg font-medium">Section 1</h3>
    <p class="text-sm text-muted-foreground">This is the first section content.</p>
  </div>
  <%= render UI::SeparatorComponent.new %>
  <div>
    <h3 class="text-lg font-medium">Section 2</h3>
    <p class="text-sm text-muted-foreground">This is the second section content.</p>
  </div>
  <%= render UI::SeparatorComponent.new %>
  <div>
    <h3 class="text-lg font-medium">Section 3</h3>
    <p class="text-sm text-muted-foreground">This is the third section content.</p>
  </div>
</div>

<div class="flex h-5 items-center space-x-4 text-sm">
  <span>Terms</span>
  <%= render "ui/separator", orientation: :vertical %>
  <span>Privacy</span>
  <%= render "ui/separator", orientation: :vertical %>
  <span>Contact</span>
  <%= render "ui/separator", orientation: :vertical %>
  <span>About</span>
</div>

<div class="flex h-5 items-center space-x-4 text-sm">
  <span>Terms</span>
  <%= render UI::Separator.new(orientation: :vertical) %>
  <span>Privacy</span>
  <%= render UI::Separator.new(orientation: :vertical) %>
  <span>Contact</span>
  <%= render UI::Separator.new(orientation: :vertical) %>
  <span>About</span>
</div>

<div class="flex h-5 items-center space-x-4 text-sm">
  <span>Terms</span>
  <%= render UI::SeparatorComponent.new(orientation: :vertical) %>
  <span>Privacy</span>
  <%= render UI::SeparatorComponent.new(orientation: :vertical) %>
  <span>Contact</span>
  <%= render UI::SeparatorComponent.new(orientation: :vertical) %>
  <span>About</span>
</div>