Layout

Separator

A 1px border hairline, horizontal or vertical (Radix Separator, decorative by default).

Usage#

Use it for splitting groups inside a card, menu or header, and between inline meta items (orientation="vertical" with a fixed height). Between sections prefer spacing; between inline words in a meta line Max uses ·.

Facts#

ProductMax

FamilyLayout

Globalwindow.DigitalCrew.Separator

Sourcemax-agent: src/components/ui/separator.tsx

Import in the appimport { Separator } from "@/components/ui/separator";

API#

TypeScript declarations emitted from src/components/ui/separator.tsx.

declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): any;
export { Separator };

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "max-w-md" },
    h("p", { className: "text-sm font-medium" }, "Claire Dubois"),
    h("p", { className: "text-sm text-muted-foreground" }, "CFO at Northwind Traders"),
    h(DC.Separator, { className: "my-4" }),
    h("div", { className: "flex h-5 items-center gap-4 text-sm" },
      h("span", null, "Email"), h(DC.Separator, { orientation: "vertical" }),
      h("span", null, "LinkedIn"), h(DC.Separator, { orientation: "vertical" }),
      h("span", null, "Call")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>