Separator

import { Div, H4, P } from "@implementjs/core";
import { Separator } from "@/lib/components/ui/separator";

export default function SeparatorDemo() {
	return Div(
		{ class: "w-full max-w-md" },
		Div(
			{ class: "space-y-1" },
			H4({ class: "text-sm leading-none font-medium" }, "implement"),
			P(
				{ class: "text-sm text-muted-foreground" },
				"A signal-based UI framework with no compiler.",
			),
		),
		Separator({ class: "my-4" }),
		Div(
			{ class: "flex h-5 items-center space-x-4 text-sm" },
			Div("Docs"),
			Separator({ orientation: "vertical" }),
			Div("Tutorial"),
			Separator({ orientation: "vertical" }),
			Div("REPL"),
		),
	);
}

A separator is a line between things. Separator renders a Div you give a size and color to — the primitive only handles orientation and accessibility.

import { Separator } from "@implementjs/primitives";

Separator({ class: "h-px w-full bg-border" });

It accepts optional props and children — pass a props object when you need attributes, or pass children directly. See createComponent. Extra props are forwarded onto the underlying Div.

Orientation

orientation defaults to "horizontal". Pass "vertical" for dividers in a row, and give the element a height:

Div(
	{ class: "flex h-5 items-center gap-4" },
	Span("Docs"),
	Separator({ orientation: "vertical", class: "h-full w-px bg-border" }),
	Span("Tutorial"),
);

Decorative or semantic

By default the separator is semantic: it renders role="separator" (plus aria-orientation="vertical" when vertical) so assistive technology announces the division.

Most dividers are purely visual. Pass decorative to render role="none" with aria-hidden, removing it from the accessibility tree:

Separator({ decorative: true, class: "h-px w-full bg-border" });

Styling

The primitive is invisible until you style it — it has no default size or color. It sets data-separator-root and data-orientation so one class list can cover both directions:

Separator({
	orientation,
	class:
		"bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
});

API Reference