kai-separator
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.
- Shadow DOM
- Horizontal + vertical
- role: separator
- One ::part to restyle
Preview
Section titled “Preview”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
Section titled “Horizontal”The default — a full-width rule between stacked sections.
Models
Skills
Plugins
Vertical
Section titled “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.
Styling
Section titled “Styling”The line is a single ::part — recolor it, thicken it, or inset it from your own stylesheet without piercing the shadow root.
| Part | Purpose | Example |
|---|---|---|
| separator | The divider line. Restyle its color, thickness, or inset from outside. | |
| Property | Type | Default | Notes |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | 'horizontal' | `horizontal` (default, block + full-width) or `vertical` (a rule inside a flex/grid row — it stretches to the row height). |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.