# Separator

A line that separates content.

Source: [separator.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/separator.tsx)

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

export default function SeparatorHorizontal() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <p className="text-sm font-medium">jarvis-ui</p>
        <p className="text-sm text-muted-foreground">
          Components built on Base UI and Tailwind CSS.
        </p>
      </div>
      <Separator className="my-4" />
      <p className="text-sm text-muted-foreground">Released under the MIT license.</p>
    </div>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/separator
```

## Usage

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

export function Section() {
  return (
    <div>
      <p className="text-sm font-medium">jarvis-ui</p>
      <Separator className="my-4" />
      <p className="text-sm text-muted-foreground">Released under the MIT license.</p>
    </div>
  );
}
```

Space it with margin classes.

## Examples

### Vertical

`orientation="vertical"` divides items in a row. Give the row a height for it to fill.

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

export default function SeparatorVertical() {
  return (
    <div className="flex h-5 items-center gap-4 text-sm">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Components</span>
      <Separator orientation="vertical" />
      <span>GitHub</span>
    </div>
  );
}
```

### With a label

Children put a label in the middle of the line, such as a date between groups of events. A text
label also names the separator for screen readers.

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

export default function SeparatorWithLabel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3 text-sm">
      <p className="text-foreground">Ada merged the pricing page redesign.</p>
      <Separator>Yesterday</Separator>
      <p className="text-foreground">Sam opened a pull request to move the blog.</p>
    </div>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Separator` | [`Separator`](https://base-ui.com/react/components/separator#api-reference) |

The tables leave out `className`, `style` and `render`. Parts built on Base UI take them as its [styling](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.

### Separator

| Prop           | Type                         | Description                                               |
| -------------- | ---------------------------- | --------------------------------------------------------- |
| `orientation?` | `"horizontal" \| "vertical"` | The orientation of the separator. Default: `"horizontal"` |