Blocks

Separator

A thin visual divider. Renders a div with role="separator"; supports horizontal and vertical orientations.

Usage

Horizontal (default)

Above the line

Below the line

tag.div(class: "space-y-4") do
  tag.p("Above the line", class: "text-sm") +
  sui.separator +
  tag.p("Below the line", class: "text-sm")
end

Vertical

Blog

Docs

Source

tag.div(class: "flex h-5 items-center gap-4 text-sm") do
  tag.span("Blog") +
  sui.separator(orientation: :vertical) +
  tag.span("Docs") +
  sui.separator(orientation: :vertical) +
  tag.span("Source")
end

Separating card sections

Profile

Billing

Security

sui.card do
  sui.card_content(class: "pt-6 space-y-4") do
    tag.p("Profile", class: "font-medium text-sm") +
    sui.separator +
    tag.p("Billing", class: "font-medium text-sm") +
    sui.separator +
    tag.p("Security", class: "font-medium text-sm")
  end
end

API

name	type	default	description
orientation	Symbol	`:horizontal`	`:horizontal` renders a full-width 1px rule; `:vertical` renders a full-height 1px rule. Must be inside a flex container with an explicit height for vertical to be visible.
**opts	Hash	—	Any additional HTML attribute passed through to the underlying `div`.