Separator

A themed one-pixel rule for visually or semantically separating content.

Horizontal

Sutra UI

Phoenix LiveView components inspired by shadcn/ui.

Installation

Add the dependency, run the installer, delete core_components.

    <div>
  <div class="space-y-1">
    <h4>Sutra UI</h4>
    <p>Phoenix LiveView components inspired by shadcn/ui.</p>
  </div>
  <.separator class="my-4" />
  <div class="space-y-1">
    <h4>Installation</h4>
    <p>Add the dependency, run the installer, delete core_components.</p>
  </div>
</div>
  

Vertical

Use orientation="vertical" inside a container with an explicit height. The separator stretches to fill its parent.

Vertical

Overview Activity Settings

    <div class="flex h-10 items-center gap-4">
  <span>Overview</span>
  <.separator orientation="vertical" />
  <span>Activity</span>
  <.separator orientation="vertical" />
  <span>Settings</span>
</div>
  

With Content

A common pattern: flank a label with two separators to create an "or" divider between alternative actions.

Or Divider

List Dividers

Drop separators between dense rows when each item needs a clear visual boundary. Composes naturally with cards and list items.

Settings List

Account

Profile and security

Notifications

Email and workspace alerts

Billing

Plan and payment details

    <div class="rounded-lg border">
  <div class="flex items-center gap-3 px-4 py-3">
    <.icon name="lucide-user" class="size-4" />
    <div>
      <p>Account</p>
      <p>Profile and security</p>
    </div>
  </div>
  <.separator />
  <div class="flex items-center gap-3 px-4 py-3">
    <.icon name="lucide-bell" class="size-4" />
    <div>
      <p>Notifications</p>
      <p>Email and workspace alerts</p>
    </div>
  </div>
  <.separator />
  <div class="flex items-center gap-3 px-4 py-3">
    <.icon name="lucide-credit-card" class="size-4" />
    <div>
      <p>Billing</p>
      <p>Plan and payment details</p>
    </div>
  </div>
</div>
  

Semantic Separators

Separators are decorative by default, matching shadcn/ui. Set decorative=false when the divider carries document structure — it then exposes role="separator" and announces itself to assistive technology.

Semantic

Account preferences

Team preferences

Notes

Separators render as a native <hr> element — semantically correct for horizontal dividers.
Vertical separators need a parent with an explicit height (e.g. flex h-10) since they stretch to fill it.
Decorative separators set role="presentation" and are hidden from screen readers. Use decorative=false for structural breaks.
Pass aria-label on semantic separators so assistive technology can announce their purpose.