Separator

Visually or semantically separates content.

Biji UI

Headless components for Leptos.

Blog

Docs

Source

Installation

biji-ui = { version = "0.5.0", features = ["separator"] }

Usage

use leptos::prelude::*;
use biji_ui::components::separator;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <div>
            <p>"Above"</p>
            <separator::Root class="my-4 h-px bg-border" />
            <p>"Below"</p>
        </div>
    }
}

API Reference

Root

Name	Type	Default	Description
class	String	""	CSS class applied to the separator element.
orientation	Orientation	Horizontal	The orientation of the separator. Use Horizontal for a horizontal line, Vertical for a vertical line.
decorative	bool	true	When true, the separator is purely visual and hidden from assistive technologies (role="none"). When false, it is semantic (role="separator").

Data Attributes

Attribute	Description
data-orientation	"horizontal" or "vertical", matching the orientation prop.