Separator

Component

About

A divider line for layouts, with horizontal and vertical orientations, centered labels and gradient fades. Use it to split sections, menus and toolbars.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Separator to your project and fits it to your theme.

Code

How Separator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Separator } from "@/components/ui/separator-divider";

export function SeparatorPreview() {
  return (
    <div className="flex flex-col w-[460px] gap-6 p-6 rounded-2xl border border-zinc-200 dark:border-white/[0.06] bg-zinc-50/50 dark:bg-[#0c0c0e]">
      {/* Horizontal Default */}
      <div>
        <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 mb-2">Default Horizontal</h4>
        <Separator />
      </div>

      {/* Horizontal Gradient */}
      <div>
        <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 mb-2">Horizontal Gradient</h4>
        <Separator variant="gradient" />
      </div>

      {/* Horizontal Dashed */}
      <div>
        <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 mb-2">Horizontal Dashed</h4>
        <Separator variant="dashed" />
      </div>

      {/* With Label */}
      <div>
        <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 mb-2">With Label (Center)</h4>
        <Separator label="continue with" labelPosition="center" />
      </div>

      {/* Vertical Mix */}
      <div>
        <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Vertical Layouts</h4>
        <div className="flex h-12 items-center justify-center gap-6 text-xs text-zinc-600 dark:text-zinc-400">
          <span>Profile</span>
          <Separator orientation="vertical" />
          <span>Security</span>
          <Separator orientation="vertical" variant="gradient" />
          <span>Billing</span>
          <Separator orientation="vertical" variant="dashed" />
          <span>Tokens</span>
        </div>
      </div>
    </div>
  );
}

/* ─── Individual Examples ──────────────────────────────────── */

export default function Demo() {
  return <SeparatorPreview />;
}