# Separator
URL: /design/components/separator

A hairline between things, horizontal or vertical.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component SeparatorSpecimen omitted]

Code for SeparatorSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Separator } from "@/components/ui/separator";

function SeparatorSpecimen(): ReactNode {
  return (
    <div className="flex w-full max-w-72 flex-col gap-3 text-sm">
      <span>Thread</span>
      <Separator />
      <div className="flex h-5 items-center gap-3">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Elements</span>
        <Separator orientation="vertical" />
        <span className="text-muted-foreground">Cloud</span>
      </div>
    </div>
  );
}
```

## Installation

Install the dependencies:

- packages

  - @base-ui/react

Copy the source into `components/ui/separator.tsx`. Registry items that depend on it install it automatically.

- code

  "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( "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className, )} {...props} /> ); } export { Separator };

* title

  components/ui/separator.tsx

* copyText

  "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( "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className, )} {...props} /> ); } export { Separator };

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  "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( "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className, )} {...props} /> ); } export { Separator };

## Usage

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

export function Example() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Elements</span>
    </div>
  );
}
```

## API Reference

### Separator

Wraps Base UI's Separator.

- `orientation`: `"horizontal" | "vertical"` (default `"horizontal"`) — The axis of the line. A vertical separator needs a bounded height from its row.
- `className?`: `string` — Additional CSS classes.