import Link from "next/link";
import { Separator } from "@/components/ui/separator/base";

export default function SeparatorDemo() {
  return (
    <div className="text-foreground">
      <div className="">
        <h4 className="text-xl font-medium leading-6">Select BaseUI Day</h4>
        <p className="text-sm text-muted-foreground">
          We are lazy on these days a week
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <Link
          href="#"
          className="hover:text-primary hover:underline hover:underline-offset-2"
        >
          Monday
        </Link>
        <Separator orientation="vertical" />
        <Link
          href="#"
          className="hover:text-primary hover:underline hover:underline-offset-2"
        >
          Tuesday
        </Link>
        <Separator orientation="vertical" />
        <Link
          href="#"
          className="hover:text-primary hover:underline hover:underline-offset-2"
        >
          Wednesday
        </Link>
      </div>
    </div>
  );
}

CSS Variable	Value	Description
`--separator-thickness-md`	`1px`	Default hairline separator
`--separator-thickness-lg`	`0.25rem`	4px — thick separator

Separator

Installation

Pattern

Tokens

thickness

Credits

We use cookies