shadcn-rails

Separator

Visually or semantically separates content.

No JavaScript Required

Shadcn Rails

Beautiful UI components for Rails.

Blog
Docs
Source

Installation

Add the component to your project:

rails generate shadcn:component separator

Usage

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

Examples

Horizontal

The default orientation. Useful for dividing sections of content.

Content above
Content below

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>Blog</div>
  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
  <div>Docs</div>
  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical) %>
  <div>Source</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...

In a Card

Account Settings

Manage your account preferences

Email notifications
SMS notifications
Push notifications

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