Primitives

Separator

Horizontal or vertical hairline divider.

Research assistant

Summarises sources and drafts answers.

Runs

Tools

Settings

Composition

First install and activate one skin. Core deliberately contains no visual token defaults.

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)