Skip to main content
separator
View Live Demo

​
Does this depend on any other rangoli components?

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

​
Usage

anyComponent.tsx
<SeparatorWithText text="or login with" className="w-full" />

​
Component Code

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

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

type TSeparator = {
    className?: string;
    text: string;
};

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

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

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


    return <div className={`${className} ${separatorBgColor} h-[1px] relative`}>
        <span className={`px-2 text-sm text-muted-foreground absolute left-1/2 -translate-x-1/2 bottom-1/2 translate-y-1/2 bg-card`}>{text}</span>
    </div>;
}