GPUI Component

English | 简体中文

UI components for building fantastic desktop applications using GPUI.

Features

Richness: 60+ 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 visualizing your data.
Editor: High performance code editor (Up to 200K lines for stable performance) with LSP (diagnostics, completion, hover, etc).
Syntax Highlighting: Syntax highlighting for editor and markdown components using Tree Sitter.

Showcase

https://longbridge.github.io/gpui-component/gallery/

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

Usage

gpui = { git = "https://github.com/zed-industries/zed" }
gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit"] }
gpui-component = { git = "https://github.com/longbridge/gpui-component" }

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!")                     .onclick(|, , | println!("Clicked!")),             )     } }
fn main() {     gpui_platform::application().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();     }); }

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

Desktop Gallery (Story)

The story crate is a gallery application that showcases all available components. Run it with:

cargo run

Examples

Some important examples are built into the story crate and can be run directly:

# Code editor with LSP support and syntax highlighting
cargo run --example editor
Dock layout system (panels, split views, tabs)
cargo run --example dock
Markdown rendering
cargo run --example markdown
HTML rendering
cargo run --example html

The examples directory also contains standalone examples, each focused on a single feature. Each example is a separate crate, run them with cargo run -p <name>:

# Basic hello world
cargo run -p hello_world
System monitor (real-time charts with CPU/memory data)
cargo run -p system_monitor
Window title customization
cargo run -p window_title

Web Gallery (WASM)

You can also run the gallery in a web browser using WASM:

cd crates/story-web
Install dependencies (first time only)
make install
Build and run development server
make dev

The gallery will be available at http://localhost:3000

For more details, see crates/story-web/README.md.

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/LGPL | | Min Binary Size [^1] | 12MB | 11MB | 5M | 20MB [^2] | | Cross-Platform | Yes | Yes | Yes | Yes | | Documentation | Simple | Simple | Simple | Good | | Web | Yes (WASM) | 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 | Yes | | Custom Theme | Yes | Yes | Yes | Yes | | Built Themes | Yes | No | No | No | | I18n | Yes | Yes | Yes | Yes |

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

[Iced]: https://github.com/iced-rs/iced [egui]: https://github.com/emilk/egui [QT 6]: https://www.qt.io/product/qt6 [Tree Sitter]: https://tree-sitter.github.io/tree-sitter/ [Syntect]: https://github.com/trishume/syntect [QSyntaxHighlighter]: https://doc.qt.io/qt-6/qsyntaxhighlighter.html [QTextDocument]: https://doc.qt.io/qt-6/qtextdocument.html [COSMIC Text]: https://github.com/pop-os/cosmic-text

[^1]: Release builds by use simple hello world example.

[^2]: Reducing Binary Size of Qt Applications

[^3]: Iced Editor:

[^4]: egui TextBuffer: edit/textbuffer.rs#L20>