Separator

import { Separator } from "@/components/ui/separator";
 
export function SeparatorDemo() {
  return (
    <div className="space-y-5">
      <div>
        <h2 className="text-lg font-semibold">Profile</h2>
        <Separator className="mt-1.5 mb-1.5" />
        <p className="text-muted-foreground text-sm">
          Account settings and preferences
        </p>
      </div>
      <div>
        <h2 className="text-lg font-semibold">Billing</h2>
        <Separator className="mt-1.5 mb-1.5" />
        <p className="text-muted-foreground text-sm">
          Manage billing information and view receipts
        </p>
      </div>
    </div>
  );
}

import { Separator } from "@/components/ui/separator";
 
export function SeparatorVertical() {
  return (
    <div className="p-4">
      <div className="flex h-10 items-center">
        <span className="font-medium">Home</span>
        <Separator orientation="vertical" className="mx-3 h-6" />
        <span className="font-medium">Products</span>
        <Separator orientation="vertical" className="mx-3 h-6" />
        <span className="font-medium">About</span>
        <Separator orientation="vertical" className="mx-3 h-6" />
        <span className="font-medium">Contact</span>
      </div>
    </div>
  );
}