Separator

Visually or semantically separates content.

Horizontal

Default horizontal separator.

html

Veritheme

An open-source UI component library.

Docs Source Changelog

<div>
  <h4 class="vt-text-sm vt-font-semibold">Veritheme</h4>
  <p class="vt-text-sm vt-text-foreground-muted">An open-source UI component library.</p>
</div>
<div class="vt-separator vt-separator-h"></div>
<div class="vt-flex vt-items-center vt-gap-4 vt-text-sm">
  <span>Docs</span>
  <span class="vt-text-foreground-muted">Source</span>
  <span class="vt-text-foreground-muted">Changelog</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 vt-separator-v"></div>
  <span class="vt-text-sm vt-font-medium">Docs</span>
  <div class="vt-separator vt-separator-v"></div>
  <span class="vt-text-sm vt-font-medium">Source</span>
  <div class="vt-separator vt-separator-v"></div>
  <span class="vt-text-sm vt-font-medium">Contact</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-foreground-muted">Or continue with</span>
  <div class="vt-flex-1 vt-border-t vt-border-border-default"></div>
</div>

<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-foreground-muted">Settings</span>
  <div class="vt-flex-1 vt-border-t vt-border-border-default"></div>
</div>

<div class="vt-flex vt-items-center vt-gap-3">
  <span class="vt-text-xs vt-uppercase vt-text-foreground-muted">Account</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-foreground-muted">Manage your account settings.</p>
</div>
<div class="vt-separator vt-separator-h vt-my-4"></div>
<div class="vt-space-y-3">
  <div class="vt-flex vt-justify-between vt-items-center">
    <span class="vt-text-sm">Name</span>
    <span class="vt-text-sm vt-text-foreground-muted">John Doe</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-flex vt-justify-between vt-items-center">
    <span class="vt-text-sm">Email</span>
    <span class="vt-text-sm vt-text-foreground-muted">john@example.com</span>
  </div>
  <div class="vt-separator vt-separator-h"></div>
  <div class="vt-flex vt-justify-between vt-items-center">
    <span class="vt-text-sm">Plan</span>
    <div class="vt-badge">
      Pro
    </div>
  </div>
</div>

Guidelines

Divider between related groups when spacing alone is not enough. Prefer whitespace first.

Veritheme

An open-source UI component library.

Docs Source

Separate distinct content groups when spacing alone isn't enough.

Name

Phone

Address

Don't

Don't divide every row — whitespace alone already groups them.

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

Used in:

Command Dropdown Menu Toolbar