Separator

Divides content, visually or semantically.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add separator --yes

The separator registry item installs these files:

app/components/ui_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Use the semantic mode by default. Pass decorative: true for purely visual dividers.

<%= ui_separator %>
<%= ui_separator(orientation: :vertical, class: "h-5") %>

Or render Ui::SeparatorComponent directly:

<%= render Ui::SeparatorComponent.new(decorative: true) %>

Examples

Orientations and decorative

Semantic separators expose aria-orientation; decorative ones stay hidden from assistive technology.

Account

Manage your email, password and preferences.

Blog

Docs

API

<div class="grid gap-4">
  <div>
    <p class="text-sm font-medium">Account</p>
    <p class="text-sm text-muted-foreground">Manage your email, password and preferences.</p>
  </div>
  <%= ui_separator %>
  <div class="flex h-5 items-center gap-3 text-sm">
    <span>Blog</span>

<div class="grid gap-4">
  <div>
    <p class="text-sm font-medium">Account</p>
    <p class="text-sm text-muted-foreground">Manage your email, password and preferences.</p>
  </div>
  <%= ui_separator %>
  <div class="flex h-5 items-center gap-3 text-sm">
    <span>Blog</span>
    <%= ui_separator(orientation: :vertical) %>
    <span>Docs</span>
    <%= ui_separator(orientation: :vertical) %>
    <span>API</span>
  </div>
  <%= ui_separator(decorative: true) %>
</div>

API reference

ui_separator(**options) wraps Ui::SeparatorComponent.new(**options).

Argument	Type	Default	Description
`orientation`	Symbol/String	`:horizontal`	`:horizontal` or `:vertical`.
`decorative`	Boolean	`nil`	When `true`, renders `role="none"` and `aria-hidden="true"`.
`**attrs`	Hash	`{}`	Free-form HTML attributes, merging `data`/`aria`.