# Separator

A visual divider that separates content into distinct sections, with support for horizontal and vertical orientations.

---

## Horizontal

```tsx
import { Separator } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="space-y-4">
      <div>
        <h3 className="text-label-16">Section 1</h3>
        <p className="text-copy-14 text-gray-900">
          This is the first section of content.
        </p>
      </div>
      <Separator />
      <div>
        <h3 className="text-label-16">Section 2</h3>
        <p className="text-copy-14 text-gray-900">
          This is the second section of content.
        </p>
      </div>
    </div>
  );
}
```

## Vertical

```tsx
import { Separator } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex h-8 items-center space-x-4">
      <p className="text-copy-14 text-gray-1000">Home</p>
      <Separator orientation="vertical" />
      <p className="text-copy-14 text-gray-1000">About</p>
      <Separator orientation="vertical" />
      <p className="text-copy-14 text-gray-1000">Services</p>
      <Separator orientation="vertical" />
      <p className="text-copy-14 text-gray-1000">Contact</p>
    </div>
  );
}
```

## Orientation Variants

```tsx
import { Separator } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="space-y-8">
      <div>
        <h4 className="mb-2 text-label-14">Horizontal Separators</h4>
        <div className="space-y-2">
          <p className="text-copy-14">Content above separator</p>
          <Separator orientation="horizontal" />
          <p className="text-copy-14">Content below separator</p>
        </div>
      </div>

      <div>
        <h4 className="mb-2 text-label-14">Vertical Separators</h4>
        <div className="flex h-6 items-center space-x-2">
          <span className="text-copy-14">Left</span>
          <Separator orientation="vertical" />
          <span className="text-copy-14">Center</span>
          <Separator orientation="vertical" />
          <span className="text-copy-14">Right</span>
        </div>
      </div>
    </div>
  );
}
```

## Accessibility Variants

```tsx
import { Separator } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="space-y-6">
      <div>
        <h4 className="mb-2 text-label-14">Decorative Separator (default)</h4>
        <p className="text-copy-14 text-gray-900">
          This separator is purely visual
        </p>
        <Separator decorative />
        <p className="text-copy-14 text-gray-900">Content continues below</p>
      </div>

      <div>
        <h4 className="mb-2 text-label-14">Semantic Separator</h4>
        <p className="text-copy-14 text-gray-900">
          This separator has semantic meaning
        </p>
        <Separator decorative={false} />
        <p className="text-copy-14 text-gray-900">
          Distinctly separate content section
        </p>
      </div>
    </div>
  );
}
```

## Custom Styling

```tsx
import { Separator } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="space-y-6">
      <div>
        <h4 className="mb-2 text-label-14">Default Separator</h4>
        <Separator />
      </div>

      <div>
        <h4 className="mb-2 text-label-14">Custom Colored Separator</h4>
        <Separator className="bg-blue-500" />
      </div>

      <div>
        <h4 className="mb-2 text-label-14">Thicker Separator</h4>
        <Separator className="h-2" />
      </div>

      <div>
        <h4 className="mb-2 text-label-14">Vertical Custom Styling</h4>
        <div className="flex h-8 items-center space-x-4">
          <span className="text-copy-14">Item 1</span>
          <Separator orientation="vertical" className="bg-red-500 w-0.5" />
          <span className="text-copy-14">Item 2</span>
          <Separator orientation="vertical" className="bg-green-500 w-2" />
        </div>
      </div>
    </div>
  );
}
```