Separator | Kiso

Quick Start

<%= kiso(:separator) %>

Locals

Local	Type	Default
`orientation:`	`:horizontal` \| `:vertical`	`:horizontal`
`decorative:`	`Boolean`	`true`
`css_classes:`	`String`	`""`
`**component_options`	`Hash`	`{}`

Usage

Horizontal

The default orientation. Add spacing with css_classes:.

<div class="space-y-1">
  <h4 class="text-sm font-medium leading-none">Kiso Components</h4>
  <p class="text-sm text-muted-foreground">A UI component library for Rails.</p>
</div>
<%= kiso(:separator, css_classes: "my-4") %>
<div class="space-y-1">
  <h4 class="text-sm font-medium leading-none">Built with Tailwind</h4>
  <p class="text-sm text-muted-foreground">Semantic tokens, dark mode, no @@apply.</p>
</div>

Vertical

Use orientation: :vertical for inline dividers. The parent element needs a fixed height and flex layout.

<div class="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
  <%= kiso(:separator, orientation: :vertical) %>
  <div>Docs</div>
  <%= kiso(:separator, orientation: :vertical) %>
  <div>Source</div>
</div>

Examples

Between Cards

<%= kiso(:card) do %>
  <%= kiso(:card, :content) { "First card" } %>
<% end %>
<%= kiso(:separator, css_classes: "my-6") %>
<%= kiso(:card) do %>
  <%= kiso(:card, :content) { "Second card" } %>
<% end %>

Custom Classes

Use css_classes: to override styles. TailwindMerge resolves conflicts.

<%= kiso(:separator, css_classes: "my-8 bg-primary") %>

Theme

# lib/kiso/themes/separator.rb
Kiso::Themes::Separator = ClassVariants.build(
  base: "bg-border shrink-0",
  variants: {
    orientation: {
      horizontal: "h-px w-full",
      vertical: "h-full w-px"
    }
  },
  defaults: { orientation: :horizontal }
)

Accessibility

Attribute	Value
`data-component`	`"separator"`
`role`	`"none"` (decorative) or `"separator"` (semantic)
`aria-orientation`	Set when `decorative: false`

By default, the separator is decorative (role="none"). When it serves as a meaningful boundary, set decorative: false to add role="separator" and aria-orientation:

<%= kiso(:separator, decorative: false) %>