104Get started
HextaUI

Separator: Right to left

Start and end follow the reading direction.

اليوم
الوثائقالمكوناتالمصدر
import { Separator } from "@/components/ui/separator"

export function SeparatorRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6 text-sm">
      <Separator align="start">اليوم</Separator>
      <div className="flex h-5 items-center gap-4">
        <a href="#">الوثائق</a>
        <Separator orientation="vertical" />
        <a href="#">المكونات</a>
        <Separator orientation="vertical" />
        <a href="#">المصدر</a>
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/separator/rtl.tsx, together with the Separator component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/separator-rtl.json

To add only the component, follow the Separator installation.

Props in this example

The Separator props this example sets, from the API reference.

Separator

PropTypeDefault
orientation
"horizontal" | "vertical""horizontal"
alignWhere the label sits along the line.
"start" | "center" | "end""center"

Every prop is in the Separator API reference.

More Separator examples

See them all, with keyboard support and accessibility notes, on the Separator page.

Related components