Separator — uicraft

Horizontal

Default horizontal separator.

html

uicraft

An open-source UI component library.

Docs Source Changelog

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

<Separator />

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

Vertical

Vertical separator for inline content.

html

Blog

Docs

Source

Contact

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

With Label

Separator with centered text.

html

Or continue with

Settings

Account

<div class="uc-relative">
  <div class="uc-absolute uc-inset-0 uc-flex uc-items-center">
    <div class="uc-w-full uc-border-t uc-border-border-default"></div>
  </div>
  <div class="uc-relative uc-flex uc-justify-center uc-text-xs uc-uppercase">
    <span class="uc-bg-neutrals-surface uc-px-2 uc-text-fg-disabled">Or continue with</span>
  </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="uc-space-y-1 uc-mb-4">
  <h3 class="uc-text-base uc-font-semibold">My Account</h3>
  <p class="uc-text-sm uc-text-fg-disabled">Manage your account settings.</p>
</div>
<hr class="uc-separator uc-my-4" />
<div class="uc-flex uc-justify-between uc-items-center">
  <span class="uc-text-sm">Name</span>
  <span class="uc-text-sm uc-text-fg-disabled">John Doe</span>
</div>
<hr class="uc-separator" />
<div class="uc-flex uc-justify-between uc-items-center">
  <span class="uc-text-sm">Email</span>
  <span class="uc-text-sm uc-text-fg-disabled">john@example.com</span>
</div>

API Reference

All CSS classes available for the Separator component.

Class	Type	Description
`uc-separator`	Base	Horizontal separator — full-width border line
`uc-separator-vertical`	Variant	Vertical separator for inline content
`uc-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