# Separator (/docs/separator)
## API Reference [#api-reference]
## Basic [#basic]
{`
import { Separator } from "moduix";
export function SeparatorDemo() {
return (
Account settingsBilling details
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#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.
```text
Separator
└─ root[data-orientation]
```
```tsx
```
| 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 [#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 [#examples]
### Vertical [#vertical]
Use `orientation="vertical"` when the separator divides inline groups, such as navigation actions.
{`
import { Separator } from "moduix";
export function VerticalSeparatorDemo() {
return (
);
}
`}
### Custom Styles [#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 (
Completed profileNext step: billing details
);
}
`}
{`
.section {
display: grid;
gap: var(--spacing-2);
}
.customSeparator {
--separator-color: var(--color-primary);
--separator-thickness: 2px;
--separator-length-horizontal: 8rem;
}
`}
### Custom Element [#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 (
Account settings} />
Billing details
);
}
`}