Blocks

Separator

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

Installation

bin/rails g shadcnrb:component separator

Usage

Horizontal (default)

Above the line

Below the line

<div class="space-y-4 w-[320px]">
  <%= tag.p "Above the line", class: "text-sm" %>
  <%= sui.separator %>
  <%= tag.p "Below the line", class: "text-sm" %>
</div>

Vertical

Blog

Docs

Source

<div class="flex h-5 items-center gap-4 text-sm">
  <%= tag.span "Blog" %>
  <%= sui.separator orientation: :vertical %>
  <%= tag.span "Docs" %>
  <%= sui.separator orientation: :vertical %>
  <%= tag.span "Source" %>
</div>

Separating card sections

Profile

Billing

Security

<%= sui.card(class: "w-[240px]") do |c| %>
  <%= c.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`.