Skip to main content
Separators create visual divisions between content areas.

​
Basic Usage

​
Vertical Orientation

Set orientation="vertical" to divide items sitting side by side in a Row, such as inline links or breadcrumb segments. A vertical separator has no intrinsic height, so it stays invisible until you give it one — the example sets css_class="h-4" on each separator to make the divider tall enough to see between its neighbors.

​
In Card Content

Dropping a separator between blocks inside a card visually groups related content into distinct sections without the heavier weight of nesting more cards. Use spacing to set the breathing room above and below the line so the sections feel separated but still part of one card.

​
API Reference

Separator Parameters

​
orientation
str
default:"horizontal"
Separator direction: "horizontal", "vertical".
​
spacing
int | None
default:"None"
Space around the separator using the Tailwind spacing scale. Adds vertical margin (my-N) for horizontal separators and horizontal margin (mx-N) for vertical separators.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes. Useful for controlling height/width.

​
Protocol Reference

Separator
{
  "type": "Separator",
  "id?": "string",
  "onMount?": "any",
  "orientation?": "horizontal | vertical",
  "spacing?": "number",
  "cssClass?": "string"
}
For the complete protocol schema, see Separator.