Skip to main content
Kobalte
ComponentsChangelog

Separator

Since v0.1.0@kobalte/core/separatorSourceSeparator

Visually or semantically separates content.

Import

import { Separator } from "@kobalte/core/separator";
// or
import { Root } from "@kobalte/core/separator";
// or (deprecated)
import { Separator } from "@kobalte/core";

Features

  • Native HTML <hr> element support.
  • Custom element type support via the WAI ARIA Separator role.
  • Support for horizontal and vertical orientation.

Anatomy

The separator consists of:

  • Separator: The root container for a separator.
<Separator />

Example

Content above
Content below
import { Separator } from "@kobalte/core/separator";


export function BasicExample() {
  return (
    <div class="flex flex-col space-y-2">
      <span>Content above</span>
      <Separator class={style.separator} />
      <span>Content below</span>
    </div>
  );
}
.separator {
  border: none;
  background-color: hsl(240 5% 84%);
}


.separator[data-orientation="horizontal"] {
  height: 1px;
  width: 100%;
}


[data-theme*="dark"] .separator {
  background-color: hsl(240 5% 26%);
}

API Reference

Separator

Separator is equivalent to the Root import from @kobalte/core/separator (and deprecated Separator.Root).

PropDescription
orientation'horizontal' | 'vertical'
The orientation of the separator.
Data attributeDescription
data-orientation='horizontal'Present when the separator has horizontal orientation.
data-orientation='vertical'Present when the separator has vertical orientation.

Rendered elements

ComponentDefault rendered element
Separatorhr

Last updated: 7/16/26, 7:09 AM