Component

Separator

Divide adjacent groups with a quiet rule that can be decorative or exposed to assistive technology.

Usage

Import the component entry and start with its smallest complete example.

import { Separator } from "@chitrank2050/monoline-ui/separator"

<div>
  <p>Account</p>
  <Separator />
  <p>Billing</p>
</div>

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Separator creates a quiet visual or semantic boundary between adjacent sections, items, or control groups.

Avoid when

Spacing alone explains the grouping, or a heading and section boundary would communicate the structure more clearly.

Accessibility

Separator is decorative by default and stays out of the accessibility tree. Set decorative to false only when the divider carries structural meaning.

Client Component

This component needs browser JavaScript for state or browser APIs.

Props, slots, and callbacks available on this component.

orientation"horizontal" | "vertical"Axis of the divider

decorativebooleanRemoves separator semantics when purely visual

Theme variables this component reads for color, spacing, and motion.

--border-strongCSS varDivider color

--border-thinCSS varDivider thickness

The source used by the example above, including any state it needs.

<div>
  <p>Account</p>
  <Separator />
  <p>Billing</p>
</div>

Compare related components or review the package and theme setup.