Separator

Visual/semantic divider built on Radix's Separator primitive. Decorative by default, so it's removed from the accessibility tree.

<div className="ui-w-64">
  <p className="ui-text-[var(--ui-text-sm)]">Section one</p>
  <Separator className="ui-my-4" />
  <p className="ui-text-[var(--ui-text-sm)]">Section two</p>
</div>

Editable — change the code above and the preview updates live.

Installation

import { Separator } from "@labanaat/ui/separator";

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the divider
decorative	boolean	true	Removes it from the accessibility tree when purely visual