Separator

A horizontal or vertical rule that divides content.

Radix primitives

An open source component library.

Blog

Docs

Source

Installation

Terminal

pnpm dlx @dowel-ui/cli add separator

npm packages installed: radix-ui.

Accessibility

Decorative by default and hidden from assistive technology. Set decorative={false} to expose it as a semantic separator when it divides meaningfully distinct groups.

Props

Separator

Every prop of Radix UI’s Separator.Root, plus className.

Quality

7/7 checks, measured from the source and its tests

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Source

This is exactly what dowel add separator writes into your project, with imports rewritten to your own path alias.

ui/separator.tsx

import { Separator as SeparatorPrimitive } from "radix-ui";
import type { ComponentPropsWithRef } from "react";

import { cn } from "@/lib/utils";

export type SeparatorProps = ComponentPropsWithRef<typeof SeparatorPrimitive.Root>;

/**
 * Visual or semantic divider.
 *
 * Defaults to decorative, which removes it from the accessibility tree. Pass
 * `decorative={false}` only when the rule genuinely separates two groups of
 * content that a screen reader user needs to know are distinct.
 */
export function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive.Root
      orientation={orientation}
      decorative={decorative}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...props}
    />
  );
}