Cognition

Components

Separator

A thin rule that visually or semantically divides content. Use it between distinct sections or between items in a row.

Preview

Cognition

The foundation every product sits on.

Blog
Docs
Source

Rendered with live Cognition tokens. Toggle the theme and it remaps, no dark: classes.

Variants

Above
Below
<Separator />
Left
Right
<Separator orientation="vertical" />

Horizontal is the default. Vertical needs a parent with a set height (here a flex row).

States

<Separator />

Separator is static by design. It has no interactive states. The only behavioral axis is decorative, which controls whether assistive tech announces it.

API

Prop
Type
Default
Description
orientation
"horizontal" | "vertical"
"horizontal"
Axis of the rule. Vertical needs a parent with a set height.
decorative
boolean
true
When true, hidden from assistive tech (role=none). Set false to expose it as a semantic separator.

Don't and Do

Don't

Don't use a Separator as a substitute for spacing. If two sections only need breathing room, use margin or padding. A Separator earns its place when a visible division clarifies that content belongs to distinct groups.

Do
<nav className="flex h-5 items-center gap-3 text-sm">
  <a href="/blog">Blog</a>
  <Separator orientation="vertical" />
  <a href="/docs">Docs</a>
</nav>
import { Separator } from "@/components/ui/separator";

export function Section() {
  return (
    <div>
      <p>Account</p>
      <Separator className="my-4" />
      <p>Billing</p>
    </div>
  );
}

Two layouts, one component: <div>… for stacked sections, orientation="vertical" for rows.