Separator
Separates related content or groups with an accessible horizontal or vertical line.
API Reference
Original primitive API
Behavior, accessibility details, and low-level props are documented by Base UI.
Basic
import { Separator } from "moduix";export function SeparatorDemo() { return ( <section aria-label="Account setup"> <span>Account settings</span> <Separator /> <span>Billing details</span> </section> );}Full list of component variables available for project-level overrides.
| Property | Default | Description |
|---|---|---|
| --separator-color | var(--color-border) | Controls the separator color. |
| --separator-length-horizontal | 100% | Controls horizontal separator width. |
| --separator-length-vertical | 1em | Controls vertical separator height. |
| --separator-thickness | 1px | Controls separator thickness for both orientations. |
| --separator-thickness-horizontal | var(--separator-thickness, 1px) | Controls horizontal separator thickness. |
| --separator-thickness-vertical | var(--separator-thickness, 1px) | Controls vertical separator thickness. |
Interactive variables scoped for docs preview without changing size scale tokens.
| Property | Value | Default | Description |
|---|---|---|---|
| --separator-color | var(--color-border) | Controls separator color. | |
| --separator-thickness | 1px | Controls separator thickness for both orientations. |
Anatomy
Separator is a single visible slot. It renders an accessible divider and receives
data-orientation so CSS can size horizontal and vertical separators differently.
Separator
└─ root[data-orientation]<Separator orientation="horizontal" />| Part | Role |
|---|---|
Separator | Root divider element. Controls orientation, accessibility attributes, styling, and element override. |
Separator does not use portal-like service layers such as portal, positioner,
backdrop, or viewport. Style the root directly with className or the
--separator-* CSS properties.
Composition
Use Separator wherever related content needs a non-interactive visual divider.
Horizontal separators fill their container by default. Vertical separators are intended
for inline groups and default to 1em height so they align with surrounding text.
Pass orientation="vertical" for inline layouts. Use className for direct styling,
CSS variables for size and color adjustments, and render when you need to compose the
root with another element.
Examples
Vertical
Use orientation="vertical" when the separator divides inline groups, such as navigation actions.
import { Separator } from "moduix";export function VerticalSeparatorDemo() { return ( <nav aria-label="Main navigation"> <a href="#">Home</a> <a href="#">Pricing</a> <Separator orientation="vertical" /> <a href="#">Sign in</a> </nav> );}Custom Styles
Pass className to style the root element directly or override the --separator-* custom properties.
import { Separator } from "moduix";import styles from "./separator-demo.module.css";export function CustomSeparatorDemo() { return ( <section className={styles.section} aria-label="Profile progress"> <span>Completed profile</span> <Separator className={styles.customSeparator} /> <span>Next step: billing details</span> </section> );}.section { display: grid; gap: var(--spacing-2);}.customSeparator { --separator-color: var(--color-primary); --separator-thickness: 2px; --separator-length-horizontal: 8rem;}Custom Element
Use render to compose the separator with another element while keeping the component
state and accessibility attributes.
import { Separator } from "moduix";export function CustomElementSeparatorDemo() { return ( <section aria-label="Account setup"> <span>Account settings</span> <Separator render={<span />} /> <span>Billing details</span> </section> );}