ComponentsNo. 47 of 109

Separator

Horizontal or vertical divider.

Installation

pnpm dlx shadcn@latest add @corsair-ui/separator

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

Also adds: utils
npm: @radix-ui/react-separatorclsxtailwind-merge

Examples

Horizontal and vertical

Corsair UI

Components you copy and own.

Docs

Components

GitHub

API

Built on Radix Separator; every prop it takes is passed through.

Accessibility

Decorative by default; pass decorative={false} when it separates content semantically.

Compatibility

Tailwind CSS: 3.4 and 4, both checked in CI
React: 19
Rendering: Client component ("use client")

Source

1 file, installed as source you own

separator.tsxView on GitHub

"use client";

import * as SeparatorPrimitive from "@radix-ui/react-separator";
import type { ComponentProps } from "react";

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

/** Decorative by default (hidden from assistive tech); pass `decorative={false}` when it separates content semantically. */
function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0",
        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  );
}

export { Separator };