Divider

UI::Divider

A horizontal or vertical rule, optionally labelled.

bin/rails generate velvetkit:add divider

Also adds: Nothing else
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Horizontal

Content between dividers

horizontal.html.erb

<div class="space-y-4">
  <%= render(UI::Divider.new) %>
  <p class="text-sm text-muted-foreground">Content between dividers</p>
  <%= render(UI::Divider.new) %>
</div>

Vertical

Left content

Right content

vertical.html.erb

<div class="flex gap-4 h-32">
  <div class="flex-1 bg-muted/50 rounded p-4">
    <p class="text-sm">Left content</p>
  </div>
  <%= render(UI::Divider.new(orientation: :vertical)) %>
  <div class="flex-1 bg-muted/50 rounded p-4">
    <p class="text-sm">Right content</p>
  </div>
</div>

With Label

Section Divider

Continue

with_label.html.erb

<div class="space-y-4">
  <%= render(UI::Divider.new(label: "OR")) %>
  <%= render(UI::Divider.new(label: "Section Divider")) %>
  <%= render(UI::Divider.new(label: "Continue")) %>
</div>

API

Arguments

UI::Divider.new(orientation: :horizontal, label: nil, class: nil, **html_attrs)