Separator

A thin rule that visually divides content along a horizontal or vertical axis.

Show code

import { Separator } from "@makeplane/propel/components/separator";

export default function BasicDemo() {
  return <Separator orientation="horizontal" decorative={false} />;
}

Installation

import { Separator } from "@makeplane/propel/components/separator";

Usage

import { Separator } from "@makeplane/propel/components/separator";

export default function BasicDemo() {
  return <Separator orientation="horizontal" decorative={false} />;
}

Examples

Vertical

Set orientation="vertical" to divide inline content; Base UI reflects the axis as aria-orientation.

Overview

Members

Settings

Show code

import { Separator } from "@makeplane/propel/components/separator";

export default function VerticalDemo() {
  return (
    <div className="flex h-6 items-center gap-3 text-body-sm-regular text-secondary">
      Overview
      <Separator orientation="vertical" decorative={false} />
      Members
      <Separator orientation="vertical" decorative={false} />
      Settings
    </div>
  );
}

Decorative

A decorative separator is visual-only and hidden from assistive technology — use it for layout rhythm, not a meaningful content boundary.

Draft the Q3 roadmapReview workspace members

Show code

import { Separator } from "@makeplane/propel/components/separator";

export default function DecorativeDemo() {
  return (
    <div className="flex w-72 flex-col gap-3 text-body-sm-regular text-secondary">
      Draft the Q3 roadmap
      <Separator orientation="horizontal" decorative />
      Review workspace members
    </div>
  );
}

API Reference

Separator

A thin rule that visually divides content. Grafts Base UI's Separator behavior onto the styled elements Separator <div> via render. Both adjustable axes from the design spec are required: orientation ("horizontal" | "vertical") and decorative (the "Role" axis — semantic vs. visual-only). Spacing around the rule belongs to the surrounding layout, not the separator.

Prop	Type	Default	Description
orientation(required)	"horizontal" \| "vertical"	—	The axis the rule runs along — one of the spec's adjustable ("depends") axes, so it is required rather than silently defaulting. `"horizontal"` is a full-width rule between stacked content; `"vertical"` is a full-height rule between inline content. Base UI reflects it as `[data-orientation]` (the single source of truth the cva keys off) and sets `aria-orientation`.
decorative(required)	boolean	—	Whether the separator is purely decorative (visually present but hidden from assistive technology). The spec's adjustable "Role" axis, so it is required — make a conscious choice rather than relying on a silent default. Pass `true` for visual-only dividers; pass `false` for separators that mark a meaningful content boundary and should be announced to screen readers. Base UI sets `role="separator"` and `aria-orientation`; `decorative` overrides both.
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SeparatorState>	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.