Separator

A separator is a thin line that divides content. It is horizontal by default, and can be vertical.

import { Separator } from "@/components/ui/separator";

export default function SeparatorDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div>
        <p className="font-semibold">nsdev/ui</p>
        <p className="text-sm text-text-secondary">Components built on Base UI.</p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-3 text-base">
        <span>Doc</span>
        <Separator orientation="vertical" />
        <span>Components</span>
        <Separator orientation="vertical" />
        <span>Blocks</span>
      </div>
    </div>
  );
}

The code

The component is a single file, read from the repository when the site is built. Press Show code to see all of it.

import type { ComponentProps } from "react";
import { Separator as BaseSeparator } from "@base-ui/react/separator";
import { cx } from "@/lib/cx";

// A 1px line that divides content. Horizontal fills the width; vertical fills the height of
// whatever flex row it sits in, so give that row a height.
export function Separator({
  orientation = "horizontal",
  className,
  ...props
}: Omit<ComponentProps<typeof BaseSeparator>, "className"> & { className?: string }) {
  return (
    <BaseSeparator
      orientation={orientation}
      className={cx(
        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className,
      )}
      {...props}
    />
  );
}

Props

Every other prop goes to the Base UI Separator underneath.

The thinking

A separator groups things. It should be there because two blocks are different, not to fill space.

• Built on Base UI: It carries the separator role and its orientation, so assistive tech knows it is a divider and which way it runs.
• One component, two directions: The orientation prop switches it between a full-width line and a full-height one.

Interface design

• Line: 1px, in the border color.
• Horizontal: Fills the width of its container.
• Vertical: Fills the height of its container, so put it in a flex row that has a height, like the h-5 row in the demo.

Interaction

• Not interactive: A separator has no hover, focus or pressed state, and can't be focused.

Empathy

• Announced: A screen reader can announce it as a separator, so don't scatter them as decoration.
• Quiet by design: The line is the border color, 1.3:1 against the page. That is right for a hint of grouping, but it isn't enough to carry meaning on its own, so don't rely on it alone to show structure.