# Separator

A thin horizontal or vertical rule that divides groups of content.

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

function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <p className="text-sm font-medium text-text-primary">
          login.acme-c0rp.com
        </p>
        <p className="text-sm text-text-secondary">
          Lookalike of acme-corp.com, registered 3 days ago.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm text-text-secondary">
        <span>MX records: 2</span>
        <Separator orientation="vertical" />
        <span>Login form: yes</span>
        <Separator orientation="vertical" />
        <span>Risk: High</span>
      </div>
    </div>
  )
}
```

## Usage

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

export function AlertPanel() {
  return (
    <section>
      <p>Lookalike domain registered 3 days ago.</p>
      <Separator className="my-4" />
      <p>MX records: 2. Login form detected.</p>
    </section>
  )
}
```

Use a separator between groups of content that the layout alone does not set apart: the
summary and the details of a panel, the items of a dense list, the metadata of a header. Set
the spacing around it with margin classes (`my-4`, `mx-2`); the separator has none.

Prefer spacing over a rule when a gap already separates the groups. Inside a menu, use
`DropdownMenuSeparator`; between form sections, `FieldSeparator`; inside a
[Button Group](/components/button-group), `ButtonGroupSeparator`.

## Examples

### Vertical

`orientation="vertical"` draws a 1px column that stretches to the height of its flex row. Set
the row's height (`h-5`) to control the length of the rule. Outside a flex container, a
vertical separator has no height and does not show.

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

function SeparatorVertical() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm text-text-secondary">
      <span className="font-medium text-text-primary">Acme Corp</span>
      <Separator orientation="vertical" />
      <span>eu-west-1</span>
      <Separator orientation="vertical" />
      <span>1,284 assets</span>
    </div>
  )
}
```

### In a list

Separators between the rows of a bordered list. Do not add one after the last row: the border
already closes the list.

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

function SeparatorInList() {
  return (
    <div className="w-full max-w-xs rounded-lg border border-border-subtle bg-surface">
      <div className="px-3 py-2 text-sm">
        <p className="font-medium text-text-primary">Credential leak</p>
        <p className="text-text-muted">2 minutes ago</p>
      </div>
      <Separator />
      <div className="px-3 py-2 text-sm">
        <p className="font-medium text-text-primary">Expired TLS certificate</p>
        <p className="text-text-muted">1 hour ago</p>
      </div>
      <Separator />
      <div className="px-3 py-2 text-sm">
        <p className="font-medium text-text-primary">New subdomain found</p>
        <p className="text-text-muted">Yesterday</p>
      </div>
    </div>
  )
}
```

## Accessibility

- The separator renders `role="separator"` with `aria-orientation`, so screen readers announce
  a boundary between the groups around it.
- For a purely visual line inside one group, such as a divider in a card illustration, use a
  `border-*` class instead, which screen readers ignore.

## API reference

`import { ... } from "@zenoxai/ui/components/separator"`

### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | `"horizontal" \| "vertical"` | `vertical` | The orientation of the separator. |
| render | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SeparatorState>` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |