GPUI Component

UI components for building fantastic desktop applications using GPUI.

Features

• Richness: 40+ cross-platform desktop UI components.
• Native: Inspired by macOS and Windows controls, combined with shadcn/ui design for a modern experience.
• Ease of Use: Stateless RenderOnce components, simple and user-friendly.
• Customizable: Built-in Theme and ThemeColor, supporting multi-theme and variable-based configurations.
• Versatile: Supports sizes like xs, sm, md, and lg.
• Flexible Layout: Dock layout for panel arrangements, resizing, and freeform (Tiles) layouts.
• High Performance: Virtualized Table and List components for smooth large-data rendering.
• Content Rendering: Native support for Markdown and simple HTML.
• Charting: Built-in charts for visualization your data.
• Editor: High performance code editor (support up to 200K lines) with LSP (diagnostics, completion, hover, etc).
• Syntax Highlighting: Syntax highlighting for editor and markdown components using Tree Sitter.

Showcase

Here is the first application: Longbridge Pro, built using GPUI Component.

We built multi-theme support in the application. This feature is not included in GPUI Component itself, but is based on the Theme feature, so it's easy to implement.

Usage

GPUI and GPUI Component are still in development, so you need to add dependencies by git.

gpui = "0.2.0"
gpui-component = "0.2.0"

Basic Example

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.into(), window, cx))
            })?;

            Ok::<_, anyhow::Error>(())
        })
        .detach();
    });
}

WebView

Still early and experimental; there are a lot of limitations.

GPUI Component has a WebView element based on Wry. This is an optional feature, which you can enable with a feature flag.

gpui-component = { version = "0.2.0", features = ["webview"] }
wry = { version = "0.53.3, package = "lb-wry" }

More usage examples can be found in the story directory.

Icons

GPUI Component has an Icon element, but it does not include SVG files by default.

The example uses Lucide icons, but you can use any icons you like. Just name the SVG files as defined in IconName. You can add any icons you need to your project.

Development

We have a gallery of applications built with GPUI Component.

cargo run

More examples can be found in the examples directory. You can run them with cargo run --example <example_name>.

Check out CONTRIBUTING.md for more details.

Compare to others

Features	GPUI Component	Iced	egui	QT 6
Language	Rust	Rust	Rust	C++/QML
Core Render	GPUI	wgpu	wgpu	QT
License	Apache 2.0	MIT	MIT/Apache 2.0	Commercial
Min Binary Size 1	12MB	11MB	5M	20MB 2
Cross-Platform	Yes	Yes	Yes	Yes
Documentation	No	Simple	Simple	Good
Web	No	Yes	Yes	Yes
UI Style	Modern	Basic	Basic	Basic
CJK Support	Yes	Yes	Bad	Yes
Chart	Yes	No	No	Yes
Table (Large dataset)	Yes (Virtual Rows, Columns)	No	Yes (Virtual Rows)	Yes (Virtual Rows, Columns)
Table Column Resize	Yes	No	Yes	Yes
Text base	Rope	COSMIC Text 3	trait TextBuffer 4	QTextDocument
CodeEditor	Simple	Simple	Simple	Basic API
Dock Layout	Yes	Yes	Yes	Yes
Syntax Highlight	Tree Sitter	Syntect	Syntect	QSyntaxHighlighter
Markdown Rendering	Yes	Yes	Basic	No
Markdown mix HTML	Yes	No	No	No
HTML Rendering	Basic	No	No	Basic
Text Selection	TextView	No	Any Label	No
Themes	Yes	No	No	No
I18n	Yes	Yes	Yes	Yes

Please submit an issue or PR if any mistakes or outdated are found.

License

Apache-2.0

• UI design based on shadcn/ui.
• Icons from Lucide.

---

1. Release builds by use simple hello world example. ↩︎

2. Reducing Binary Size of Qt Applications ↩︎

3. Iced Editor: db5a1f6353/graphics/src/text/editor.rs (L65-L68) ↩︎

4. egui TextBuffer: 0a81372cfd/crates/egui/src/widgets/text_edit/text_buffer.rs (L20) ↩︎