Separator

PreviousNext

React aria components Separator with shadcn characteristics.

Docs
ouiui

Preview

Loading preview…
registry/default/ui/oui-separator.tsx
"use client";

import * as Rac from "react-aria-components";
import { twMerge } from "tailwind-merge";

/**
 * Derived from shadcn Separator
 */
export function Separator({
  orientation,
  className,
  ...props
}: React.ComponentProps<typeof Rac.Separator>) {
  // RAC sets aria-orientation="vertical" for vertical separators; horizontal separators use <hr> with implicit orientation.
  return (
    <Rac.Separator
      data-slot="separator"
      orientation={orientation}
      className={twMerge(
        "h-px w-full shrink-0 bg-border aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-px",
        className,
      )}
      {...props}
    />
  );
}

Installation

npx shadcn@latest add @oui/oui-separator

Usage

import { OuiSeparator } from "@/components/ui/oui-separator"
<OuiSeparator />