Separator
A thin divider between content, decorative or semantic.
Installation
Included in poetry-ui — available as
poetry_separator
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add separator
Default
Poetry UI
Server-rendered components for Rails.
Decorative by default: aria-hidden, no role.
<div class="w-80">
<p class="text-sm font-medium">Poetry UI</p>
<p class="text-sm text-muted-foreground">Server-rendered components for Rails.</p>
<%= poetry_separator(class: "my-2") %>
<p class="text-sm text-muted-foreground">Decorative by default: aria-hidden, no role.</p>
</div>
List
<div class="w-80 text-sm">
<div class="flex items-center justify-between py-2">
<span class="text-muted-foreground">Plan</span>
<span class="font-medium">Team annual</span>
</div>
<%= poetry_separator %>
<div class="flex items-center justify-between py-2">
<span class="text-muted-foreground">Seats</span>
<span class="font-medium">12 of 20</span>
</div>
<%= poetry_separator %>
<div class="flex items-center justify-between py-2">
<span class="text-muted-foreground">Renews</span>
<span class="font-medium">Mar 1, 2027</span>
</div>
<%= poetry_separator %>
<div class="flex items-center justify-between py-2">
<span class="text-muted-foreground">Billing</span>
<span class="font-medium">$240.00 / yr</span>
</div>
</div>
Menu
Inbox
Unread messages
Drafts
Saved for later
Archive
Older threads
<div class="flex items-stretch gap-4 text-sm">
<div class="pr-4">
<p class="font-medium">Inbox</p>
<p class="text-muted-foreground">Unread messages</p>
</div>
<%= poetry_separator(orientation: :vertical) %>
<div class="px-4">
<p class="font-medium">Drafts</p>
<p class="text-muted-foreground">Saved for later</p>
</div>
<%= poetry_separator(orientation: :vertical) %>
<div class="pl-4">
<p class="font-medium">Archive</p>
<p class="text-muted-foreground">Older threads</p>
</div>
</div>
Vertical semantic
<div class="flex items-center gap-4 text-sm">
<span>Blog</span>
<%= poetry_separator(orientation: :vertical, decorative: false, class: "h-8") %>
<span>Docs</span>
<%= poetry_separator(orientation: :vertical, decorative: false, class: "h-8") %>
<span>Source</span>
</div>
API
Poetry::Ui::Separator::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| decorative: | Boolean | defaults to true |
Whether the divide is purely visual (aria-hidden) or a semantic boundary (role=separator). |
| orientation: | Symbol | one of: horizontal, vertical; defaults to :horizontal |
The divider's axis. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=separator] | The divider itself - decorative (aria-hidden) by default, role=separator when decorative: false |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| separator | data-orientation | always - the resolved orientation | horizontal · vertical |