Separator

Visually or semantically separates content.

Installation

Command to install the Separator component.

buridan add separator

uv run buridan add separator

python -m buridan add separator

Component Guide

Use the following to build the Separator component.

from components.ui.separator import separator

separator()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/separator.py

Examples

Default

The default orientation is "horizontal".

Props used: none required — orientation="horizontal" is the default.

buridan/ui

The UI Library for Reflex Devs.

A set of beautifully designed components that you can customize, extend, and build on.

import reflex as rx

from components.ui.separator import separator


def separator_horizontal() -> rx.Component:
    return rx.el.div(
        rx.el.div(
            rx.el.div("buridan/ui", class_name="leading-none font-medium"),
            rx.el.div(
                "The UI Library for Reflex Devs.",
                class_name="text-muted-foreground",
            ),
            class_name="flex flex-col gap-1.5",
        ),
        separator(class_name="bg-zinc-200 dark:bg-zinc-800"),
        rx.el.div(
            "A set of beautifully designed components that you can customize, extend, and build on."
        ),
        class_name="flex max-w-sm flex-col gap-4 text-sm",
    )

Vertical

Props used: orientation="vertical" on separator.

Blog

Docs

Source

import reflex as rx

from components.ui.separator import separator


def separator_vertical() -> rx.Component:
    return rx.el.div(
        rx.el.div("Blog"),
        separator(orientation="vertical"),
        rx.el.div("Docs"),
        separator(orientation="vertical"),
        rx.el.div("Source"),
        class_name="flex h-5 items-center gap-4 text-sm",
    )

Vertical separators between menu items with descriptions.

Props used: orientation="vertical" on separator.

SettingsManage preferences

AccountProfile & security

HelpSupport & docs

import reflex as rx

from components.ui.separator import separator


def separator_menu() -> rx.Component:
    return rx.el.div(
        rx.el.div(
            rx.el.span("Settings", class_name="font-medium"),
            rx.el.span(
                "Manage preferences", class_name="text-xs text-muted-foreground"
            ),
            class_name="flex flex-col gap-1",
        ),
        separator(orientation="vertical"),
        rx.el.div(
            rx.el.span("Account", class_name="font-medium"),
            rx.el.span(
                "Profile & security", class_name="text-xs text-muted-foreground"
            ),
            class_name="flex flex-col gap-1",
        ),
        separator(orientation="vertical", class_name="hidden md:block"),
        rx.el.div(
            rx.el.span("Help", class_name="font-medium"),
            rx.el.span("Support & docs", class_name="text-xs text-muted-foreground"),
            class_name="hidden flex-col gap-1 md:flex",
        ),
        class_name="flex items-center gap-2 text-sm md:gap-4",
    )

List

Horizontal separators between list items.

Props used: none required — orientation="horizontal" is the default.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

import reflex as rx

from components.ui.separator import separator


def separator_list() -> rx.Component:
    return rx.el.div(
        rx.el.dl(
            rx.el.dt("Item 1"),
            rx.el.dd("Value 1", class_name="text-muted-foreground"),
            class_name="flex items-center justify-between",
        ),
        separator(),
        rx.el.dl(
            rx.el.dt("Item 2"),
            rx.el.dd("Value 2", class_name="text-muted-foreground"),
            class_name="flex items-center justify-between",
        ),
        separator(),
        rx.el.dl(
            rx.el.dt("Item 3"),
            rx.el.dd("Value 3", class_name="text-muted-foreground"),
            class_name="flex items-center justify-between",
        ),
        class_name="flex w-full max-w-sm flex-col gap-2 text-sm",
    )

API Reference

separator

separator(orientation="vertical")

Prop	Type	Default
`orientation`	`Literal["horizontal", "vertical"]`	`"horizontal"`
`decorative`	`bool`	`True`
`class_name`	`str`	`""`

When decorative=True (the default), aria-hidden="true" is set — the separator is treated as purely visual. Set decorative=False to render it as a semantic role="separator" for assistive technology instead.

External Tools

︲

On This Page