Separator - neobrutal-ui

Use Separator sparingly to clarify a boundary. It renders the Base UI separator primitive; it is not a heading and does not name either side of the content.

Loading preview...

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

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div>
        <h3 className="font-heading">neobrutal-ui</h3>
        <p className="text-sm">Editable components built with Base UI.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-3 text-sm">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Registry</span>
        <Separator orientation="vertical" />
        <span>Templates</span>
      </div>
    </div>
  );
}

#Installation

Complete the base setup. For manual installation:

First time? Install the shared base once.

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/separator.json

npm install @base-ui/react@^1.8.0

Create components/ui/separator.tsx:

"use client";

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";

import { cn } from "@/lib/utils";

function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={(state) =>
        cn(
          "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
          typeof className === "function" ? className(state) : className,
        )
      }
      {...props}
    />
  );
}

export { Separator };

#Usage

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

export default function SectionDivider() {
  return (
    <div className="grid max-w-sm gap-4">
      <h2 className="font-bold">Workspace</h2>
      <p>Shared project settings.</p>
      <Separator aria-hidden="true" />
      <p>Members can manage their own notifications.</p>
    </div>
  );
}

#API reference

Prop	Purpose	Default
`orientation`	horizontal or vertical	`horizontal`
`className`	Length, spacing, and layout	Theme border color
`aria-hidden`	Hide a decorative divider from assistive technology	Unset
`render`	Primitive element composition	Separator primitive

#Accessibility

Hide purely decorative dividers from assistive technology. Give vertical separators a parent with a defined height. Use headings and spacing for document structure rather than placing a separator between every sentence.