Separator component

The kit:separator component renders a thin horizontal or vertical dividing line.

Above the separator

Below the separator

kit:separator renders as <hr> by default. It sets role="separator" and aria-orientation automatically. The color and opacity are token-based and can be overridden per-instance.

Examples of separator

orientation

orientation: 'horizontal' | 'vertical' = 'horizontal'

Vertical separators are inline-flex and stretch to fill their container’s height.

inset

Adds a leading margin to indent the separator from the left edge useful inside lists.

inset: boolean = false

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

API Reference

kit:separator

props	type	description	default
is	enum	HTML element to render.	`'hr'`
orientation	enum	Direction of the separator.	`'horizontal'`
inset	`boolean`	Adds a leading indent.	`false`
thickness	`string \| number`	Border width override (px number or CSS string).
opacity	`string \| number`	Opacity override.	`0.12`
color	`string`	Color override (`--kit-separator-color`).

To organize your data, combine Separators with List for greater legibility.