shadcn-rails

Separator

Visually or semantically separates content.

No JavaScript Required
separator/default 
<%= render Shadcn::SeparatorComponent.new %>

Installation

Add the component to your project:

rails generate shadcn:add separator

Usage

<%= render Shadcn::SeparatorComponent.new %>

Examples

Horizontal

The default orientation. Useful for dividing sections of content.

Content above
Content below
<div class="space-y-4 w-full max-w-md">
  <div class="text-sm">Content above</div>
  <%= render Shadcn::SeparatorComponent.new %>
  <div class="text-sm">Content below</div>
</div>

Vertical

Use orientation: :vertical to divide inline items.

Home
Products
About
Contact
<div class="flex h-5 items-center space-x-4 text-sm">
  <div>Home</div>
  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
  <div>Products</div>
  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
  <div>About</div>
  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
  <div>Contact</div>
</div>

Decorative

Set decorative: true when the separator is purely visual and has no semantic meaning.

This separator is decorative and won't be announced by screen readers.

Content continues...

<div class="space-y-4 w-full max-w-md">
  <p class="text-sm">This separator is decorative and won't be announced by screen readers.</p>
  <%= render Shadcn::SeparatorComponent.new(decorative: true) %>
  <p class="text-sm">Content continues...</p>
</div>

In a Card

Account Settings

Manage your account preferences

Email notifications
SMS notifications
Push notifications 
<%= render Shadcn::CardComponent.new(class_name: "w-full max-w-md") do |card| %>
  <% card.with_header do |header| %>
    <% header.with_title { "Account Settings" } %>
    <% header.with_description { "Manage your account preferences" } %>
  <% end %>
  <% card.with_content do %>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-sm">Email notifications</span>
        <%= render Shadcn::SwitchComponent.new %>
      </div>
      <%= render Shadcn::SeparatorComponent.new %>
      <div class="flex items-center justify-between">
        <span class="text-sm">SMS notifications</span>
        <%= render Shadcn::SwitchComponent.new %>
      </div>
      <%= render Shadcn::SeparatorComponent.new %>
      <div class="flex items-center justify-between">
        <span class="text-sm">Push notifications</span>
        <%= render Shadcn::SwitchComponent.new %>
      </div>
    </div>
  <% end %>
<% end %>

Orientations

separator/orientations 
<%= render Shadcn::SeparatorComponent.new(orientation: orientation.to_sym) %>

In Content

separator/in_content 
<%= render Shadcn::SeparatorComponent.new %>

With Text

separator/with_text 
<%= render Shadcn::SeparatorComponent.new %>

Vertical in Toolbar

separator/vertical_in_toolbar 
<%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>

API Reference

API Reference

Prop Type Default Description
orientation Symbol :horizontal Separator orientation (:horizontal, :vertical)
decorative Boolean false Whether the separator is purely decorative (no semantic meaning)
class_name String nil Additional CSS classes to apply

Accessibility

  • By default, uses role="separator" and aria-orientation
  • When decorative: true, uses role="none" to hide from assistive technologies
  • Use decorative separators for purely visual dividers that don't represent a semantic boundary