Separator

Account

Billing

<div class="mx-auto flex w-fit items-center gap-4">
  <span class="shrink-0 text-sm text-muted-foreground">Account</span>
  <hr class="separator w-32" />
  <span class="shrink-0 text-sm text-muted-foreground">Billing</span>
</div>

Usage

Include CSS

@import "tailwindcss";
@import "5h3ll-ui/vega.css";

Or import only the base CSS, Separator component CSS, and one style pack.

@import "tailwindcss";
@import "5h3ll-ui/base.css";
@import "5h3ll-ui/components/separator.css";
@import "5h3ll-ui/styles/vega.css";

Add your separator HTML

Use a native <hr> for horizontal separators. Add aria-orientation="vertical" for a vertical separator in flex or grid layouts.

<hr class="separator" />

HTML structure

<hr class=“separator”>: Horizontal separator. Keep the native element when the separator conveys structure in the document or menu.
aria-orientation=“vertical” Optional: Switches the separator to a vertical rule for side-by-side layouts.

Examples

Horizontal

Profile

Manage your public details and display name.

Notifications

Choose which updates should reach your inbox.

<div class="space-y-4">
  <section>
    <h3 class="text-sm font-medium">Profile</h3>
    <p class="text-sm text-muted-foreground">Manage your public details and display name.</p>
  </section>
  <hr class="separator" />
  <section>
    <h3 class="text-sm font-medium">Notifications</h3>
    <p class="text-sm text-muted-foreground">Choose which updates should reach your inbox.</p>
  </section>
</div>

Vertical

<div class="flex h-10 items-center gap-4">
  <button type="button" class="btn" data-variant="ghost">Overview</button>
  <hr class="separator" aria-orientation="vertical" />
  <button type="button" class="btn" data-variant="ghost">Activity</button>
  <hr class="separator" aria-orientation="vertical" />
  <button type="button" class="btn" data-variant="ghost">Settings</button>
</div>

Decorative

If a separator is purely visual, keep the native <hr> but add aria-hidden="true" so it is ignored by assistive technology.

<hr class="separator" aria-hidden="true" />