Skip to main content
separator
View Live Demo

Does this depend on any other rangoli components?

No, Separator is an independent component, it’s not depend on any other rangoli components.

Usage

anyComponent.tsx
<Separator className="w-full" />

Component Code

@app/components/Separator.tsx
"use client";

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

type TSeparator = {
  className?: string;
};

export default function Separator({ className }: TSeparator) {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Avoid rendering theme-based class until mounted
  const themeClass = !mounted ? "" : theme === "light" ? "bg-black/10" : "bg-white/10";

  return <div className={`${className} ${themeClass} h-[1px]`} />;
}