UIIcons

Separator

A visual divider between content sections, supporting horizontal and vertical orientations.

Stera UI
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
Separator

Installation

pnpm dlx stera-ui@latest add separator

Examples

Horizontal

The default orientation. Renders as a full-width horizontal rule.

Stera UI
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
Separator Horizontal

Vertical

Use orientation="vertical" to render a vertical divider. Works best inside a flex container with a fixed height.

Blog
Docs
Source
Separator Vertical

API Reference

Extends Base UI's Separator primitive and accepts all its props.

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"