Separator

Guidelines#

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#

API#

TypeScript declarations emitted from src/components/ui/separator.tsx (the module also exports its other parts).

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

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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>

More in Layout#