# GPUI Component
[English](./README.md) | [简体中文](./README.zh-CN.md)
[](https://github.com/longbridge/gpui-component/actions/workflows/ci.yml) [](https://docs.rs/gpui-component/) [](https://crates.io/crates/gpui-component)
UI components for building fantastic desktop applications using [GPUI](https://gpui.rs).
## 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](https://longbridge.com/desktop), built using GPUI Component.
## Usage
```toml
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
```rs
use gpui::*;
use gpui_component::{button::*, *};
pub struct HelloWorld;
impl Render for HelloWorld {
fn render(&mut self, _: &mut Window, _: &mut Context) -> 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() {
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](https://lucide.dev) icons, but you can use any icons you like. Just name the SVG files as defined in [IconName](https://github.com/longbridge/gpui-component/blob/main/crates/ui/src/icon.rs#L86). 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:
```bash
cargo run
```
### Examples
Some important examples are built into the `story` crate and can be run directly:
```bash
# 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 `:
```bash
# 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:
```bash
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](crates/story-web/README.md).
Check out [CONTRIBUTING.md](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](https://www.qt.io/qt-licensing) |
| 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](https://www.qt.io/blog/reducing-binary-size-of-qt-applications-part-3-more-platforms)
[^3]: Iced Editor:
[^4]: egui TextBuffer:
## License
Apache-2.0
- UI design based on [shadcn/ui](https://ui.shadcn.com), some from [Reui](https://reui.io).
- Icons from [Lucide](https://lucide.dev).