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.

Installation

pnpm dlx stera-ui add separator

Usage

import { Separator } from "@/components/ui/separator"
<Separator />

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.

Vertical

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

Blog
Docs
Source
<div className="flex h-5 items-center gap-4">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

API Reference

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

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