gpuicn Components

Component 44 of 60

Separator

Visually separates content.

site/src/previews/separator.rs

Starting the preview. GPUI compiles to WebAssembly, so the first load takes a few seconds. This browser has neither WebGPU nor WebGL 2, so the live preview cannot run. The code on this page still works. The preview did not start.

Separator, running in the browser. The second tab shows the preview's own source, which includes its layout and demo state. For the smallest working example, see Usage below. Download the whole showcase for its imports and helpers.

Installation

After the one-time setup, run the command from your app root. The CLI writes the modules and keeps src/ui/mod.rs in step. 

gpuicn add separator

If you prefer to copy the files by hand, declare them yourself:

// src/ui/mod.rs
pub mod theme;
pub mod separator;

// src/main.rs
mod ui;

Usage

Put this in a view module and return example() from its render method. 

use crate::ui::separator::Separator;
use gpui_kit::IntoElement;

fn example() -> impl IntoElement {
    Separator::new("section-divider")
}

API reference

pub fn new(id: impl Into<ElementId>) -> Self

Creates a `Separator` with a stable caller-owned ID.

pub fn horizontal(mut self) -> Self

Draws a horizontal separator.

pub fn vertical(mut self) -> Self

Draws a vertical separator.

Installed source, 62 lines 
//! Nova-styled semantic separator.

use gpui_kit::{
    App, Axis, ElementId, InteractiveElement as _, IntoElement, RenderOnce, Role,
    StatefulInteractiveElement as _, Window, div,
};

use super::theme::{UiTheme, primitives::surface};

#[derive(IntoElement)]
/// A Nova horizontal or vertical separator.
pub struct Separator {
    style: gpui_kit::StyleRefinement,
    id: ElementId,
    orientation: Axis,
}

impl Separator {
    /// Creates a `Separator` with a stable caller-owned ID.
    pub fn new(id: impl Into<ElementId>) -> Self {
        Self {
            style: gpui_kit::StyleRefinement::default(),
            id: id.into(),
            orientation: Axis::Horizontal,
        }
    }
    /// Draws a horizontal separator.
    pub fn horizontal(mut self) -> Self {
        self.orientation = Axis::Horizontal;
        self
    }
    /// Draws a vertical separator.
    pub fn vertical(mut self) -> Self {
        self.orientation = Axis::Vertical;
        self
    }
}

impl RenderOnce for Separator {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = UiTheme::read(cx).clone();
        let base =
            div()
                .id(self.id)
                .role(Role::Splitter)
                .aria_orientation(match self.orientation {
                    Axis::Horizontal => gpui_kit::accesskit::Orientation::Horizontal,
                    Axis::Vertical => gpui_kit::accesskit::Orientation::Vertical,
                });
        super::theme::apply_style(
            surface::divider(base, &theme, self.orientation),
            &self.style,
        )
    }
}

impl gpui_kit::Styled for Separator {
    fn style(&mut self) -> &mut gpui_kit::StyleRefinement {
        &mut self.style
    }
}

Platform notes

Visual reference: shadcn/ui 4.19.0, Neutral Nova. Implementation: crates/ui/registry/separator/separator.rs, using GPUI Kit 0.6.4.

Kit supplies separator semantics. gpuicn applies a one-pixel Nova border color in horizontal or vertical orientation.

The Rust source and Usage example define the supported API. Browser DOM/CSS behavior, exact exit animations and cross-platform screen-reader parity are not implied by the native component. See migration qualification for the checks completed on this revision.