ComponentsNo. 62 of 148

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.

Styling

Restyle it in your project: className on each part, the theme variables, and these attributes with arbitrary variants, e.g. className="[&_[data-slot=separator]]:text-primary".

Its length is a plain class: className="w-8" makes a short rule, h-4 a short vertical one.

data-slot

separator

Radix Separator also sets its own attributes on the parts, such as data-state and data-disabled.

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. Its size comes from plain classes, so
 * `className="w-8"` (or `h-4` on a vertical one) replaces the default length.
 */
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",
        orientation === "vertical" ? "h-full w-px" : "h-px w-full",
        className
      )}
      {...props}
    />
  );
}

export { Separator };