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

function RichSeparator({
  children,
  className,
  variant = "single-line",
  orientation = "horizontal",
  ...props
}: React.ComponentProps<"div"> & {
  variant?: "single-line" | "double-line" | "background";
  orientation?: "horizontal" | "vertical";
}) {
  if (variant === "single-line") {
    return (
      <div
        data-slot="rich-separator"
        data-variant={variant}
        data-orientation={orientation}
        className={cn(
          "grid gap-2 text-lg font-medium",
          orientation === "horizontal"
            ? "w-full grid-cols-[1fr_auto_1fr] items-center"
            : "h-full grid-rows-[1fr_auto_1fr] justify-items-center",
          className
        )}
        {...props}
      >
        <Separator orientation={orientation} />
        {children}
        <Separator orientation={orientation} />
      </div>
    );
  }

  if (variant === "double-line") {
    return (
      <div
        data-slot="rich-separator"
        data-variant={variant}
        data-orientation={orientation}
        className={cn(
          "flex items-center justify-center text-lg font-medium",
          orientation === "horizontal"
            ? "w-full flex-row border-y py-2"
            : "h-full flex-col border-x px-2",
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }

  if (variant === "background") {
    return (
      <div
        data-slot="rich-separator"
        data-variant={variant}
        data-orientation={orientation}
        className={cn(
          "flex items-center justify-center bg-muted text-lg font-medium",
          orientation === "horizontal"
            ? "w-full flex-row py-2.5"
            : "h-full flex-col px-2.5",
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }

  return <Separator orientation={orientation} className={className} {...props} />;
}

export { RichSeparator };

Rich Separator

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft