## 1. Project Overview & Quickstart (longbridge/gpui-component) ## File: README.md [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) Build fantastic, high-performance desktop apps with Rust and [GPUI](https://gpui.rs). GPUI Component is a comprehensive Rust desktop application framework. It combines a production-ready UI system with application-grade data, layout, and editing capabilities, all built on a reusable foundation of behavior, state, and infrastructure. ## Features - **60+ UI Components**: Forms, navigation, overlays, feedback, layout, and more, with polished interactions and productive defaults. - **Production Ready**: Used to build Longbridge Pro from day one and continuously refined in a publicly shipped commercial desktop application. - **Native Feel**: Modern controls inspired by macOS and Windows, backed by semantic themes and multiple sizes. - **120 FPS**: GPU-accelerated interfaces that remain smooth under load. - **Data Tables**: Virtual scrolling, fixed and resizable columns, sorting, and cell selection across hundreds of thousands of rows. - **Virtual Lists**: Render only the visible range, including lists whose items have different sizes. - **Code Editor**: Stable performance at 200K lines with Tree-sitter highlighting and LSP diagnostics, completion, and hover. - **Dock Layout**: Resizable panels, draggable tabs, nested splits, edge docks, and serializable freeform Tiles. - **Rich Content**: Native Markdown and HTML rendering, syntax highlighting, and built-in charts. - **Design Freedom**: Use the complete visual system or build your own on the behavior and infrastructure in `gpui-base`. - **Cross Platform**: Ship one Rust codebase to macOS, Windows, and Linux. ## Framework Architecture ### Two layers. One ecosystem. Use `gpui-component` to keep the application coherent with one complete visual and interaction system. Use `gpui-base` when your product needs to create and own that system itself. | **`gpui-component`** | **`gpui-base`** | | -------------------------------- | --------------------------------------------- | | Complete, styled components | Unstyled behavior and infrastructure | | Productive defaults with theming | Full control over structure and visual design | | Best for building applications | Best for building design systems | ```text APPLICATION │ ┌─────────────────┴─────────────────┐ │ │ ▼ ▼ ┌──────────────────┐ ┌──────────────────┐ │ gpui-component │ │ Your Design │ │ Styled UI │ │ System │ └────────┬─────────┘ └────────┬─────────┘ │ │ └────────────────┬─────────────────┘ ▼ ┌──────────────────┐ │ gpui-base │ │ Behavior · State │ │ Infrastructure │ └────────┬─────────┘ ▼ GPUI ``` > **Behavior belongs to the foundation. Presentation belongs to the application.** Use **`gpui-component`** when you want polished controls ready to ship. Build on **`gpui-base`** when your application should own its component source, layout, styling, and motion while reusing difficult interaction behavior. The layering follows the same separation that makes the [shadcn](https://ui.shadcn.com) ecosystem flexible: | GPUI Component ecosystem | Web ecosystem | | ------------------------------------ | ------------------------------- | | [GPUI](https://gpui.rs) | HTML + Tailwind CSS | | [`gpui-base`](crates/base/README.md) | [Base UI](https://base-ui.com) | | `gpui-component` | shadcn's styled component layer | [Explore the architecture →](docs/ARCHITECTURE.md) ## Showcase GPUI Component has powered [Longbridge Pro](https://longbridge.com/desktop) from day one. The framework is extracted from the demands of a publicly shipped commercial desktop application rather than designed in isolation. > **GPUI provides the rendering foundation. Longbridge provides the production foundation.** ## 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 ``` 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). --- ## File: docs/README.md # Architecture These documents describe the current architecture implemented by `gpui-base`. They are maintained as durable references rather than project-progress logs. - [Architecture](ARCHITECTURE.md) explains the crate boundaries, ownership model, component taxonomy, state flow, overlay system, and native/WASM integration. - [Styling and Motion](STYLING-AND-MOTION.md) explains semantic tokens, typed state styles, application-owned presentation, and animation primitives. For component-level APIs and runnable examples, see the [gpui-base documentation](../website/base/index.md). ## 2. Official Technical Reference & Guides (longbridge/docs) # Longbridge Docs 长桥证券用户知识库，涵盖账户管理、资金操作、交易规则、产品功能等知识领域。 **线上地址**：[docs.longbridge.com](http://docs.longbridge.com/) ## 仓库结构（bun workspaces monorepo） ``` apps/ ├── hk/ # 香港站(/hk/*):内容主源 zh-CN,人工维护 markdown ├── sg/ # 新加坡站(/sg/*):内容主源 zh-CN,人工维护 markdown └── us/ # 美国站(/us/*):内容主源 en,由 Zendesk 同步生成 └── scripts/ # Zendesk 同步器(bun run sync:us) packages/ └── shared/ # 共享层:theme 组件 / composables / i18n / VitePress 配置工厂 / UnoCSS ``` 三个 region 是互相独立的 VitePress 应用：独立 dev、独立构建。URL 上的 `/hk/ /sg/ /us/` 前缀由各 app 的 `base` 提供，部署时 CI 把三份产物合并到同一 个域名下，对外 URL 与历史完全一致。 ## 常用命令（仓库根目录） ```bash bun install # 安装(workspace hoisted) bun run dev:hk # 起 HK dev server bun run dev:sg # 起 SG dev server bun run dev:us # 起 US dev server bun run build:hk # 单独构建某个 app bun run build # 依次构建三个 app bun run sync:us # 从 Zendesk 拉取 US 内容(需 apps/us/.env.local 凭据) ``` ## 已知限制 - **dev 下跨 region 跳转不可用**：三个 app 是独立 dev server(不同端口)，右上角 region 切换器指向 `/sg/` 这类绝对路径，在 dev 只会 404。生产环境三份产物 合并在同一域名下，无此问题。 - **region 切换是整页跳转**：跨 region = 跨应用，没有 SPA 内切换。 ## 内容维护 - **HK / SG**：直接改 `apps/{hk,sg}/docs/zh-CN/**` 下的 markdown 提 PR。 en / zh-HK 目录缺失的文件会在构建时从 zh-CN 自动镜像。 - **US**：内容在 [Zendesk 后台](https://longbridgeus.zendesk.com) 维护， 不要手改 `apps/us/docs/**`(会被下次同步覆盖)。同步只拉已发布 (`draft:false`) 文章。