Skip to content
comp0

comp0

Actions

Separator

A native rule that divides content into visually distinct groups.

When to use it: Use it between groups of content or controls that should read as distinct.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Inbox

128 unread messages

ArchiveMoveTrash
Separator.tsxtsx
import { Separator } from "@comp0/react";

export function Example() {
  return (
    <div className="w-64 text-base text-zinc-800 sm:text-sm dark:text-zinc-100">
      <p className="font-medium">Inbox</p>
      <p className="text-zinc-600 dark:text-zinc-400">128 unread messages</p>
      <Separator className="my-3 border-zinc-950/10 dark:border-white/10" />
      <div className="flex items-center gap-3">
        <span>Archive</span>
        <Separator
          orientation="vertical"
          className="w-px self-stretch bg-zinc-950/10 dark:bg-white/10"
        />
        <span>Move</span>
        <Separator
          orientation="vertical"
          className="w-px self-stretch bg-zinc-950/10 dark:bg-white/10"
        />
        <span>Trash</span>
      </div>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Separator

    Native hr, or a div with the separator role when vertical. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Place Separator between the groups it divides.

  2. 2

    Add the supporting parts

    Set orientation="vertical" between items in a horizontal row and give it a width and height.

  3. 3

    Make the behavior clear

    Pass role="presentation" when the line is purely decorative so nothing extra is announced.

    Exampletsx
    <Separator orientation="vertical" />

Keyboard

Forms and accessibility

No form behavior.

Accessibility checklist

  • Keep it non-focusable; a separator conveys grouping, not interaction.
  • Use role="presentation" for lines that are only decoration.
  • Do not rely on the line alone to explain a relationship; name groups when it matters.

API reference

Importtsx
import { Separator } from "@comp0/react";

Separator

DOM element

Native hr, or a div with the separator role when vertical.

PropTypeDescription
orientation"horizontal" | "vertical"Rendering direction; vertical renders a div with aria-orientation="vertical".
rolestringPass "presentation" when the rule is purely decorative.
classNamestringStyles the rule; a vertical separator needs its own width and height.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-orientation]

on Separator

The rendering direction: "horizontal" or "vertical".

Keep exploring