Separator

kai-separator

Marks a boundary in a layout that assistive technology can announce.

• Shadow DOM
• Horizontal + vertical
• role: separator
• One ::part to restyle

Preview

When to use

To break a layout into clear groups: a horizontal rule between stacked sections, or a vertical one between inline items. Prefer it over a bare CSS border when the divide is worth announcing.

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.

<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

Models

Skills

Plugins

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.

Opus 4.8Fable 5Haiku 4.5

Styling

The line is a single ::part, so recolor, thicken, or inset it from your own stylesheet.

Part	Purpose	Example
separator	The divider line. Restyle its color, thickness, or inset from outside.	kai-separator::part(separator) { background: var(--color-border) }

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
orientation	"horizontal" | "vertical"	'horizontal'	The separator's axis. Defaults to a full-width block; the cross-axis form suits a flex or grid row.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Separator

---

Need a hand? Report a bug Ask for help