@cf/ui

@cf/separator

Separator

A one-pixel rule between groups of content, horizontal or vertical.

Connor Forsyth

Designer who writes code.

NotesPhotosCV

Base UI's Separator, which renders role="separator" and sizes itself from data-horizontal or data-vertical. A vertical one uses self-stretch, so it needs a flex parent to have any height.

The site doesn't use it directly. It shows up inside FieldSeparator, and the menu and select components have their own.

import { Separator } from "@/components/ui/separator";
 
<div className="flex h-5 items-center gap-2">
  <span>Notes</span>
  <Separator orientation="vertical" />
  <span>Photos</span>
</div>

Rules

The same rules ship in DESIGN.md and the MCP server, for the agents building with this.

  • must

    Pass orientation="vertical" for a divider inside a flex row; the default is horizontal, which renders a full-width 1px line.

    set-vertical-orientation

  • should

    Inside menus and selects use DropdownMenuSeparator or SelectSeparator, and in forms use FieldSeparator, instead of a bare Separator.

    Those carry the right margins and keep the separator inside the primitive's own list semantics.

    use-the-local-separator

  • should

    For a divider with text in the middle, like a date or an event in a thread, use Marker with variant="separator", not two Separators around a span.

    labelled-dividers-use-marker

Install

bunx shadcn@latest add @cf/separator

Needs the @cf registry in your components.json once. The theme and any sibling components come along automatically.

Source

separator.tsxShow
"use client";
 
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import { cn } from "cn";
 
function Separator({
  className,
  orientation = "horizontal",
  ...props
}: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className
      )}
      data-slot="separator"
      orientation={orientation}
      {...props}
    />
  );
}
 
export { Separator };