GPUI Component

60+ Components

Comprehensive library of cross-platform desktop UI components for building feature-rich applications.

High Performance

Virtualized Table and List components for smooth rendering of large datasets with minimal memory footprint.

Themeable

Built-in theme system with with 20+ themes, and dark mode out of the box.

Flexible Layouts

Dock layout for panel arrangements, resizable panels, and freeform layouts for any application structure.

Data Visualization

Built-in chart components for visualizing data with Line, Bar, Area, and Pie charts.

Code Editor

High-performance code editor with LSP support, syntax highlighting, powered by Tree-sitter and Rope.

Simple and Intuitive API

Get started with just a few lines of code. Stateless components make it easy to build complex UIs.

Button::new("ok")
    .primary()
    .label("Click Me")
    .on_click(|_, _, _| println!("Button clicked!"))

Install GPUI Component

Add the following to your Cargo.toml:

GPUI and GPUI Component are under active development, recently GPUI have some new features not published on crates.io, so we recommend using the git version for now.

The documentation on this site are based on the Git main branch, if you use the crates.io version, there may be some differences.

toml

gpui = { git = "https://github.com/zed-industries/zed" }
gpui-component = { git = "https://github.com/longbridge/gpui-component" }

If you prefer to use the versions on crates.io. Please visit docs.rs to check the API differences.

toml

gpui = "0.2.2"
gpui-component = "0.5.1"

Hello World

The following src/main.rs is a simple "Hello, World!" application:

use gpui::*;
use gpui_component::{button::*, *};

pub struct HelloWorld;
impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .v_flex()
            .gap_2()
            .size_full()
            .items_center()
            .justify_center()
            .child("Hello, World!")
            .child(
                Button::new("ok")
                    .primary()
                    .label("Let's Go!")
                    .on_click(|_, _, _| println!("Clicked!")),
            )
    }
}

fn main() {
    let app = Application::new();

    app.run(move |cx| {
        // This must be called before using any GPUI Component features.
        gpui_component::init(cx);

        cx.spawn(async move |cx| {
            cx.open_window(WindowOptions::default(), |window, cx| {
                let view = cx.new(|_| HelloWorld);
                // This first level on the window, should be a Root.
                cx.new(|cx| Root::new(view, window, cx))
            })
            .expect("Failed to open window");
        })
        .detach();
    });
}

Run the program with the following command:

$ cargo run