---
title: Separator
description: A subtle divider for sections and inline items.
group: Components
order: 58
---

A subtle line between sections or inline items. It is horizontal by default and can run vertically within a row.

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

export function Example() {
  return (
    <div className="text-sm font-normal tracking-wide">
      <div className="space-y-1">
        <h4 className="text-foreground">arctis/ui</h4>
        <p className="text-muted-foreground">
          A set of components you can customize, extend, and build on.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-foreground">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}
```

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add separator
```

## Usage

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

```tsx
<Separator />
```

## Basic

A title and description followed by links divided with vertical separators.

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

export function Example() {
  return (
    <div className="text-sm font-normal tracking-wide">
      <div className="space-y-1">
        <h4 className="text-foreground">arctis/ui</h4>
        <p className="text-muted-foreground">
          A set of components you can customize, extend, and build on.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-foreground">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}
```

## Vertical

Use `orientation="vertical"` between inline items. Vertical lines use `self-stretch` in a flex row.

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

export function Example() {
  return (
    <div className="flex h-5 items-center justify-center gap-4 text-sm font-normal tracking-wide text-foreground">
      <div>Blog</div>
      <Separator orientation="vertical" />
      <div>Docs</div>
      <Separator orientation="vertical" />
      <div>Source</div>
    </div>
  )
}
```

## Menu

Vertical separators between menu items, each with a title and short description.

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

export function Example() {
  return (
    <div className="flex items-stretch gap-4 text-sm font-normal tracking-wide">
      <div className="grid gap-0.5">
        <div className="text-foreground">Settings</div>
        <div className="text-muted-foreground">Preferences</div>
      </div>
      <Separator orientation="vertical" />
      <div className="grid gap-0.5">
        <div className="text-foreground">Account</div>
        <div className="text-muted-foreground">Profile & security</div>
      </div>
      <Separator orientation="vertical" />
      <div className="grid gap-0.5">
        <div className="text-foreground">Help</div>
        <div className="text-muted-foreground">Support & docs</div>
      </div>
    </div>
  )
}
```

## List

Horizontal separators between stacked rows.

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

const items = [
  { label: "Item 1", value: "Value 1" },
  { label: "Item 2", value: "Value 2" },
  { label: "Item 3", value: "Value 3" },
]

export function Example() {
  return (
    <div className="text-sm font-normal tracking-wide">
      {items.map((item, index) => (
        <div key={item.label}>
          {index > 0 ? <Separator /> : null}
          <div className="flex items-center justify-between py-2">
            <span className="text-foreground">{item.label}</span>
            <span className="text-muted-foreground">{item.value}</span>
          </div>
        </div>
      ))}
    </div>
  )
}
```

## API Reference

### Separator

When `decorative` is `true` (the default), assistive technology ignores the line. Set `decorative={false}` to render a semantic `role="separator"`.

| Prop | Type | Default |
| --- | --- | --- |
| orientation | "horizontal" \| "vertical" | "horizontal" |
| decorative | boolean | true |
| className | string | — |

```tsx
<Separator />
```

## Source

```tsx
import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

type SeparatorProps = HTMLAttributes<HTMLDivElement> & {
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
};

export function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <div
      role={decorative ? "none" : "separator"}
      aria-orientation={decorative ? undefined : orientation}
      data-slot="separator"
      data-orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
        "data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
        className,
      )}
      {...props}
    />
  );
}
```