Separator - neobrutal-ui

On this page2 sections

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">Copy-owned 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

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

"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={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",
        className,
      )}
      {...props}
    />
  );
}

export { Separator };

#Usage

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

<Separator />