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"),
		),
	);
}

Installation

npx jsrepo add @implementjs/ui/separator

import type { ComponentProps } from "@implementjs/core";
import { Separator as SeparatorPrimitive } from "@implementjs/primitives";
import { createComponent } from "@implementjs/primitives";
import { cn } from "@/lib/utils";

export type SeparatorProps = ComponentProps<typeof SeparatorPrimitive>;

export const Separator = createComponent(function Separator({
	class: className,
	orientation = "horizontal",
	decorative = true,
	...props
}: SeparatorProps) {
	return SeparatorPrimitive({
		...props,
		orientation,
		decorative,
		"data-slot": "separator",
		class: cn(
			"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
			className,
		),
	});
});

Usage

A 1px line in the border color, running along whichever orientation you pick. decorative defaults to true, which keeps it out of the accessibility tree — a line drawn for the eye should not be announced. Set it to false for a separator that genuinely divides content into sections.

A vertical separator has no height of its own: give it one, or put it in a flex row that stretches.

import { Separator } from "@/lib/components/ui/separator";

Separator();

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

API Reference

Every prop the styling does not consume is forwarded to the Separator primitive, so the tables below are the whole surface — the behavior props and the styling ones together.