PettyUI/.firecrawl/kobalte.dev-docs-core-components-separator.md

Separator

Visually or semantically separates content.

Import

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

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

Copytsx
<Separator />

Copytsx
<Separator />

Example

Content above

---

Content below

index.tsxstyle.css

Copytsx
import { Separator } from "@kobalte/core/separator";
import "./style.css";

function App() {
  return (
    <div>
      <span>Content above</span>
      <Separator class="separator" />
      <span>Content below</span>
    </div>
  );
}

Copytsx
import { Separator } from "@kobalte/core/separator";
import "./style.css";

function App() {
  return (
    <div>
      <span>Content above</span>
      <Separator class="separator" />
      <span>Content below</span>
    </div>
  );
}

API Reference

Separator

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

Prop	Description
orientation	`'horizontal'

Data attribute	Description
data-orientation='horizontal'	Present when the separator has horizontal orientation.
data-orientation='vertical'	Present when the separator has vertical orientation.

Rendered elements

Component	Default rendered element
Separator	hr

Previous←SelectNextSkeleton→