Components / Separator

Separator

Stable

grouping content blocks

Above

Below

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../separator_example.html.erb

<div class="w-full max-w-md space-y-4">
  <p class="text-center text-sm text-[hsl(var(--senren-muted-foreground))]">Above</p>
  <%= render Senren::SeparatorComponent.new(variant: :horizontal) %>
  <p class="text-center text-sm text-[hsl(var(--senren-muted-foreground))]">Below</p>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal

bin/rails senren:add separator

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal

bin/rails generate senren:component separator --no-client

At a glance #

Category Layout

Class name Senren::SeparatorComponent

Stimulus —

Variants horizontal, vertical

Depends on —

Pairs with card, settings_section

Source #

app/components/senren/separator_component.html.erb

<%= tag.div "", **root_attrs("", role: "separator", "aria-orientation": aria_orientation) %>

app/components/senren/separator_component.rb

module Senren
  class SeparatorComponent < BaseComponent
    VARIANTS = {
      horizontal: 'h-px w-full bg-[hsl(var(--senren-border))]',
      vertical: 'w-px h-full bg-[hsl(var(--senren-border))]'
    }.freeze

    SIZES = { md: '' }.freeze

    def aria_orientation = variant == :vertical ? 'vertical' : 'horizontal'
  end
end

AI agent rules #

Use for

+grouping content blocks

Avoid

-decorative-only use without semantics

Accessibility #

role=separator with aria-orientation.

Typography

Skeleton