# Separator

A visual divider between content.

## Installation

```bash
npx shadcn@latest add https://landorui.landorestate.com/r/separator.json
```

[Registry JSON](https://landorui.landorestate.com/r/separator.json)

## Preview

```tsx
import { Separator } from "@/components/ui/separator";

export function Preview() {
  return (
    <div className="w-full max-w-sm">
      <div className="text-sm">Above the separator</div>
      <Separator className="my-3" />
      <div className="text-sm">Below the separator</div>
    </div>
  );
}
```


## Source

### ui/separator.tsx

```tsx
"use client";

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";

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

function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className,
      )}
      {...props}
    />
  );
}

export { Separator };
```



## Usage

A visual divider between content.

```tsx
import { Separator } from "@/components/ui/separator";
```