Separator

<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

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, 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.

<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.

<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

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.