# Separator

A themed divider line between groups of content — horizontal or vertical, with the right separator role.

<p class="kai-tag-sub">kai-separator</p>

A themed divider line between groups of content — a toolbar split, menu groups, a header/sidebar boundary. It carries `role="separator"`, so it's an accessible `<hr>` you can also stand on end.

## Preview

> **tip:** 
Reach for it to break a layout into clear groups — divide stacked sections with a horizontal rule, or split inline items (toolbar buttons, breadcrumb segments, a label and a value) with a vertical one. Prefer it over a bare CSS border when the divide is meaningful enough to announce: it picks up your theme tokens and exposes the right `role="separator"` for free.

## Usage

Drop it between the things you're dividing. A horizontal separator is a full-width block rule; `orientation="vertical"` turns it into a rule that stretches to its row's height, so place it inside a flex or grid row.

```html
<section>Models</section>
<kai-separator></kai-separator>
<section>Skills</section>

<div style="display: flex; align-items: center; gap: 0.5rem">
  <span>Opus 4.8</span>
  <kai-separator orientation="vertical"></kai-separator>
  <span>Fable 5</span>
</div>
```

A separator only reads in context, so these show it between real content (rather than a bare line in an empty box).

### Horizontal

The default — a full-width rule between stacked sections.

<div class="not-content my-4 rounded-xl border border-line bg-surface px-5 py-4">
  <p style="margin:0;font-weight:600">Models</p>
  <kai-separator style="margin:0.85rem 0"></kai-separator>
  <p style="margin:0;font-weight:600">Skills</p>
  <kai-separator style="margin:0.85rem 0"></kai-separator>
  <p style="margin:0;font-weight:600">Plugins</p>
</div>

### Vertical

`orientation="vertical"` stretches the rule to its row's height — for dividing inline items. Place it in a flex or grid row with a height.

<div class="not-content my-4 rounded-xl border border-line bg-surface px-5 py-4">
  <div style="display:flex;align-items:center;gap:0.85rem;height:1.5rem">
    <span>Opus 4.8</span>
    <kai-separator orientation="vertical"></kai-separator>
    <span>Fable 5</span>
    <kai-separator orientation="vertical"></kai-separator>
    <span>Haiku 4.5</span>
  </div>
</div>

## Styling

The line is a single `::part` — recolor it, thicken it, or inset it from your own stylesheet without piercing the shadow root.

## Props

## Composed from