Separator — Veritheme

Horizontal

Default horizontal separator.

html

Veritheme

An open-source UI component library.

Docs Source Changelog

<div>
  <h4>Title</h4>
  <p>Description</p>
</div>

<Separator />

<div class="vt-flex vt-items-center vt-gap-4">
  <span>Docs</span>
  <span>Source</span>
</div>

Vertical

Vertical separator for inline content.

html

Blog

Docs

Source

Contact

<div class="vt-flex vt-items-center vt-gap-4 vt-h-5">
  <span class="vt-text-sm vt-font-medium">Blog</span>
  <div class="vt-separator-v"></div>
  <span class="vt-text-sm vt-font-medium">Docs</span>
  <div class="vt-separator-v"></div>
  <span class="vt-text-sm vt-font-medium">Source</span>
</div>

With Label

Separator with centered text.

html

Or continue with

Settings

Account

<div class="vt-flex vt-items-center vt-gap-3 vt-text-xs vt-uppercase">
  <div class="vt-flex-1 vt-border-t vt-border-border-default"></div>
  <span class="vt-text-mains-quaternary">Or continue with</span>
  <div class="vt-flex-1 vt-border-t vt-border-border-default"></div>
</div>

In Context

Real-world usage in a settings card.

html

My Account

Manage your account settings.

Name John Doe

Email john@example.com

Plan

Pro

<div class="vt-space-y-1 vt-mb-4">
  <h3 class="vt-text-base vt-font-semibold">My Account</h3>
  <p class="vt-text-sm vt-text-mains-quaternary">Manage your account settings.</p>
</div>
<hr class="vt-separator vt-my-4" />
<div class="vt-flex vt-justify-between vt-items-center">
  <span class="vt-text-sm">Name</span>
  <span class="vt-text-sm vt-text-mains-quaternary">John Doe</span>
</div>
<hr class="vt-separator" />
<div class="vt-flex vt-justify-between vt-items-center">
  <span class="vt-text-sm">Email</span>
  <span class="vt-text-sm vt-text-mains-quaternary">john@example.com</span>
</div>

API Reference

All CSS classes available for the Separator component.

Class	Type	Description
`vt-separator`	Base	Horizontal separator — full-width border line
`vt-separator-v`	Variant	Vertical separator for inline content
`vt-my-4`	Modifier	Vertical margin to control spacing around the separator

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use hr element or role="separator" for semantic dividers
Orientation	Vertical separators should have aria-orientation="vertical"
Decorative	Purely visual separators can use role="none" to hide from screen readers