gpui-component Documentation

1. Project Overview & Quickstart (longbridge/gpui-component) Copy Chapter

File: README.md Copy Chapter

English | 简体中文

Build fantastic, high-performance desktop apps with Rust and GPUI.

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 Copy Chapter

• 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 Copy Chapter

Two layers. One ecosystem. Copy Section

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.

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 ecosystem flexible:

Explore the architecture →

Showcase Copy Chapter

GPUI Component has powered Longbridge Pro
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 Copy Chapter

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 Copy Section

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() {
    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 Copy Section

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 Copy Chapter

Desktop Gallery (Story) Copy Section

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

cargo run

Examples Copy Section

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

Check out CONTRIBUTING.md for more details.

Compare to others Copy Chapter

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

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

[^2]: Reducing Binary Size of Qt Applications

[^3]: Iced Editor: https://github.com/iced-rs/iced/blob/db5a1f6353b9f8520c4f9633d1cdc90242c2afe1/graphics/src/text/editor.rs#L65-L68

[^4]: egui TextBuffer: https://github.com/emilk/egui/blob/0a81372cfd3a4deda640acdecbbaf24bf78bb6a2/crates/egui/src/widgets/text_edit/text_buffer.rs#L20

License Copy Chapter

Apache-2.0

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

File: docs/README.md Copy Chapter

Architecture

These documents describe the current architecture implemented by gpui-base.
They are maintained as durable references rather than project-progress logs.

• Architecture explains the crate boundaries, ownership model,
  component taxonomy, state flow, overlay system, and native/WASM integration.
• Styling and Motion explains semantic tokens, typed
  state styles, application-owned presentation, and animation primitives.

For component-level APIs and runnable examples, see the
gpui-base documentation.

2. Official Technical Reference & Guides (longbridge/docs) Copy Chapter

Longbridge Docs

长桥证券用户知识库，涵盖账户管理、资金操作、交易规则、产品功能等知识领域。

线上地址：docs.longbridge.com

仓库结构（bun workspaces monorepo） Copy Chapter

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 与历史完全一致。

常用命令（仓库根目录） Copy Chapter

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 凭据)

已知限制 Copy Chapter

• dev 下跨 region 跳转不可用：三个 app 是独立 dev server(不同端口)，右上角
  region 切换器指向 /sg/ 这类绝对路径，在 dev 只会 404。生产环境三份产物
  合并在同一域名下，无此问题。
• region 切换是整页跳转：跨 region = 跨应用，没有 SPA 内切换。

内容维护 Copy Chapter

• HK / SG：直接改 apps/{hk,sg}/docs/zh-CN/** 下的 markdown 提 PR。
  en / zh-HK 目录缺失的文件会在构建时从 zh-CN 自动镜像。
• US：内容在 Zendesk 后台 维护，
  不要手改 apps/us/docs/**(会被下次同步覆盖)。同步只拉已发布
  (draft:false) 文章。