# Separator

Horizontal or vertical divider.

Docs: https://corsairui.vercel.app/docs/separator

## Install

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

Also adds: `utils`.
npm: `@radix-ui/react-separator`, `clsx`, `tailwind-merge`.

## API

Built on Radix Separator (https://www.radix-ui.com/primitives/docs/components/separator); its props pass through.

## Styling

Restyle it in the project that installs it: `className` on each part, the theme variables, and these attributes with arbitrary variants (`[&_[data-slot=…]]:…`, `data-[state=…]:…`).

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

data-slot: `separator`

## Accessibility

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

## Examples

On the docs page: Horizontal and vertical. The usage examples in the source comments below are the reference.

## Source

What `shadcn add` writes into the project:

### separator.tsx

```tsx
"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 };
```