Separator

Thread

Docs

Elements

Cloud

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/separator.tsx. Registry items that depend on it install it automatically.

components/ui/separator.tsx

Usage

import { Separator } from "@/components/ui/separator";

export function Example() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Elements</span>
    </div>
  );
}

API Reference

Separator

Wraps Base UI's Separator.

SeparatorProps

orientation : "horizontal" | "vertical" = "horizontal": The axis of the line. A vertical separator needs a bounded height from its row.
className ?: string: Additional CSS classes.