Components

Separator

Horizontal or vertical hairline divider.

Research assistant

Summarises sources and drafts answers.

Runs

Tools

Settings

Composition

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/separator.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/separator.json

Primary installed source

src/registry/sources/control-ui/ui/separator.tsx

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";

import type { ComponentProps, CSSProperties } from "react";

import type { SeparatorKnobStyle } from "@/components/control-ui/knob-contracts/separator-knobs";

import { cn } from "@/components/control-ui/lib/cn";

// axis comes straight from prop, never data-attribute, so no skin can break it

export function Separator({

className,

orientation = "horizontal",

...props

}: Omit<ComponentProps<typeof SeparatorPrimitive>, "style"> & { style?: CSSProperties & SeparatorKnobStyle }) {

return (

<SeparatorPrimitive

data-control-ui="separator"

data-control-family="separator"

data-slot="root"

orientation={orientation}

className={cn("shrink-0", orientation === "vertical" ? "h-full w-px" : "h-px w-full", className)}

{...props}

/>

);

}

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-separator-* · 1 knobsHow the cascade resolves

--cui-separator-root-background<color>var(--border)