;
};
Separators create visual divisions between content areas.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Column,
P,
Separator,
)
with Column():
P("Content above the separator")
Separator(spacing=4)
P("Content below the separator")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Column",
"children": [
{"content": "Content above the separator", "type": "P"},
{"cssClass": "my-4", "type": "Separator", "orientation": "horizontal"},
{"content": "Content below the separator", "type": "P"}
]
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Row,
Separator,
Span,
)
with Row(gap=4, css_class="items-center"):
Span("Left")
Separator(orientation="vertical", css_class="h-4")
Span("Middle")
Separator(orientation="vertical", css_class="h-4")
Span("Right")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4 items-center",
"type": "Row",
"children": [
{"content": "Left", "code": false, "type": "Span"},
{"cssClass": "h-4", "type": "Separator", "orientation": "vertical"},
{"content": "Middle", "code": false, "type": "Span"},
{"cssClass": "h-4", "type": "Separator", "orientation": "vertical"},
{"content": "Right", "code": false, "type": "Span"}
]
}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
CardContent,
P,
Separator,
)
with Card():
with CardContent():
P("First section")
Separator(spacing=4)
P("Second section")
Separator(spacing=4)
P("Third section")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{"content": "First section", "type": "P"},
{"cssClass": "my-4", "type": "Separator", "orientation": "horizontal"},
{"content": "Second section", "type": "P"},
{"cssClass": "my-4", "type": "Separator", "orientation": "horizontal"},
{"content": "Third section", "type": "P"}
]
}
]
}
}
```
## API Reference
Separator direction: `"horizontal"`, `"vertical"`.
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.
Additional Tailwind CSS classes. Useful for controlling height/width.
## Protocol Reference
```json Separator theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Separator",
"id?": "string",
"onMount?": "any",
"orientation?": "horizontal | vertical",
"spacing?": "number",
"cssClass?": "string"
}
```
For the complete protocol schema, see [Separator](/protocol/separator).