Base

Separator

Visual divider supporting horizontal and vertical orientations. The decorative prop controls ARIA semantics.

Installation

bash

npx polyui add separator

Orientation

Above

Below

Left

Right

tsx

import { Separator } from "@polyui/react/separator"
export function SeparatorOrientation() {
  return (
    <div className="space-y-4">
      <div>
        <p className="text-sm">Above</p>
        <Separator className="my-4" />
        <p className="text-sm">Below</p>
      </div>

      <div className="flex h-8 items-center gap-4">
        <span className="text-sm">Left</span>
        <Separator orientation="vertical" />
        <span className="text-sm">Right</span>
      </div>
    </div>
  )
}

Real World

Profile

Settings

Logout

tsx

import { Separator } from "@polyui/react/separator"
export function SeparatorRealWorld() {
  return (
    <div className="flex h-5 items-center space-x-4 text-sm">
      <span>Profile</span>
      <Separator orientation="vertical" />
      <span>Settings</span>
      <Separator orientation="vertical" />
      <span>Logout</span>
    </div>
  )
}

Props

属性	类型	默认值	说明
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the separator. Vertical orientation requires a flex parent container.
`decorative`	`boolean`	`true`	When true, hidden from screen readers.
`className`	`string`	`—`	Additional Tailwind class names for adjusting spacing or color.