使用 Rust 和 GPUI 构建出色、高性能的桌面应用。
GPUI Kit 是一个综合性的 Rust 桌面应用开发框架。它将生产级 UI 系统、应用级数据与布局能力、编辑能力,以及可复用的行为、状态和基础设施整合在一起, 并让交付后的应用可以被 JavaScript 扩展。GPUI Kit 提供 75+ 个有完整文档的组件与原语, 并具备 WebAssembly、AccessKit 无障碍、UI 集成测试及可选的 JavaScript 扩展运行时。
gpui-kit 应用唯一需要依赖的 crate
├── gpui-base 无样式的行为、状态与基础设施
└── gpui-component GPUI Component:完整的带样式 UI 系统
gpui-kit 会固定配套的 GPUI 版本并导出 GPUI、base、component 和 assets,Rust 应用只需声明这一个依赖。JavaScript 扩展宿主另行依赖 gpui-shell;它默认开启的 components feature 提供带样式的组件目录。
- 75+ 组件与原语:覆盖表单、导航、浮层、数据展示、编辑、反馈和布局等场景,提供成熟交互与高效默认值。
- 生产就绪:从第一天起用于构建 Longbridge Pro,并在公开发布的商业桌面应用中持续打磨。
- WebAssembly:应用与组件示例可通过
wasm32-unknown-unknown在 Web 中运行。 - 无障碍:交互层内置 AccessKit role、name、state、relationship 与 action,并有对应测试覆盖。
- UI 集成测试:在 headless window 中渲染真实组件,驱动鼠标与键盘输入,并验证状态、Focus、布局和无障碍信息。
- 原生体验:现代控件设计灵感来自 macOS 与 Windows,并提供语义化主题和多种尺寸。
- 120 FPS:GPU 加速界面,在高负载下依然保持流畅。
- 数据表格:虚拟滚动、固定列、列宽调整、排序与单元格选择,可承载数十万行数据。
- 虚拟列表:只渲染可见区域,并支持不同尺寸的列表项。
- 代码编辑器:20 万行规模下仍保持稳定,集成 Tree-sitter 高亮与 LSP 诊断、补全和悬浮提示。
- Dock 布局:可调整面板、可拖拽标签、嵌套分割、边缘停靠,并可序列化保存。
- 丰富内容:原生 Markdown 与 HTML 渲染、语法高亮和内置图表。
- 设计自由:使用完整视觉系统,或基于
gpui-base的行为与基础设施构建自己的系统。 - JavaScript 扩展:
gpui-shell让已发布的 Rust 宿主以脚本方式加载面板与业务逻辑,每项能力都需显式授予。 - 跨平台:通过一份 Rust 代码交付 macOS、Windows 和 Linux。
使用 gpui-component,让整个应用保持统一、完整的视觉与交互风格;当产品需要创建并拥有自己的设计系统时,使用 gpui-base;当应用需要在交付后仍可被 JavaScript 扩展时,使用 gpui-shell。
gpui-component |
gpui-base |
gpui-shell |
|---|---|---|
| 完整且带样式的组件 | 无预设样式的行为与基础设施 | 由 Rust 托管的 JavaScript 运行时 |
| 开箱即用,并支持主题定制 | 完全掌控结构与视觉设计 | 能力逐项授予 |
| 适合直接构建应用 | 适合构建设计系统 | 适合插件与脚本化应用 |
APPLICATION
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ gpui-component │ │ Your Design │ │ gpui-shell │
│ Styled UI │ │ System │ │ JS extensions │
└────────┬─────────┘ └────────┬─────────┘ └────────┬─────────┘
│ │ │
└────────────────────┼────────────────────┘
▼
┌──────────────────┐
│ gpui-base │
│ Behavior · State │
│ Infrastructure │
└────────┬─────────┘
▼
GPUI
行为属于基础层,呈现属于应用。
如果希望使用精致、开箱即用且风格统一的控件,请选择 gpui-component。如果应用需要拥有组件源码、布局、样式和动效,同时复用复杂且可靠的交互行为,请直接构建于 gpui-base。如果希望贡献者无需 fork、也无需发新版本就能扩展产品,请加入 gpui-shell。
这种分层方式与 shadcn 生态的灵活性来源一致:
| GPUI Kit 生态 | Web 生态 |
|---|---|
| GPUI | HTML + Tailwind CSS |
gpui-base |
Base UI |
gpui-component |
shadcn 的完整样式组件层 |
GPUI Kit 从第一天起就用于构建 Longbridge Pro。 这个框架不是脱离应用场景凭空设计出来的,而是从一款公开发布的商业桌面应用中持续提炼而成。
GPUI 为渲染打下基础,Longbridge 为生产实践打下基础。
[dependencies]
gpui-kit = "0.7"gpui-kit 始终引入 GPUI 和 gpui-base;gpui-component 和默认图标集默认开启。只想保留部分层时关闭默认 feature 按需选择即可。gpui-component 的 feature(inspector、decimal、tree-sitter 及各 tree-sitter-<language>)在 gpui-kit 上同名可用。
启用可选的 gpui-fast feature,可以为核心、原生平台、WebAssembly 和所有已启用的
Kit 层统一选择 GPUI Fast:
[dependencies]
gpui-kit = { version = "0.7", features = ["gpui-fast"] }原有导入、初始化流程和测试宏保持不变,应用无需 [patch] 或 crate 别名。
默认后端仍是固定版本的上游 GPUI 快照。Cargo features 是累加的,因此选择 Fast 后,
上游包仍会参与编译。feature 组合和对比命令见
Getting Started。
use gpui_kit::component::button::*;
use gpui_kit::component::*;
use gpui_kit::*;
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_kit::application().run(move |cx| {
// 使用任何 GPUI Component 功能之前必须先调用此函数。
gpui_kit::init(cx);
gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| {
cx.new(|_| HelloWorld)
})
.expect("Failed to open window");
});
}gpui_kit::open_window 是应用的窗口启动入口,始终挂载 Base Root。Component 初始化时注册窗口展示与浮层扩展;Cargo feature 不会选择不同的根类型。
默认开启的 assets feature 会以 gpui-kit-assets 的形式内置 Lucide 图标集,通过 gpui_kit::application().with_assets(gpui_kit::assets::Assets) 交给应用即可。若想使用自己的图标,去掉该 feature,并按照 IconName 中的定义命名 SVG 文件。
为你的 AI 编码助手(Cursor, Claude Code, Gemini CLI, Codex 等)安装 GPUI Kit 技能库:
npx skills add longbridge/gpui-kit| 技能 | 描述 |
|---|---|
gpui-kit |
初始化、组件目录、常用使用模式、GPUI 机制(Element、Entity、异步、Focus、Action、测试),以及 Coding Guides。 |
gpui-kit-design-guides |
Design Guides:布局、间距、层级、交互状态、浮层与界面文案的规范。 |
story crate 是一个展示所有可用组件的画廊应用程序,通过以下命令运行:
cargo run一些较大的示例复用 story 画廊组件,并作为独立 package 运行:
# Dock 布局系统(面板、分割视图、标签页)
cargo run -p example-dock
# Markdown 渲染
cargo run -p example-markdown
# HTML 渲染
cargo run -p example-htmlexamples 目录还包含独立示例,每个示例专注于单一功能。每个示例是一个独立的 crate,使用 cargo run -p <name> 运行:
# 支持 LSP 和语法高亮的代码编辑器
cargo run -p example-editor
# 基础 Hello World
cargo run -p hello_world
# 系统监控器(实时 CPU/内存数据图表)
cargo run -p system_monitor
# 窗口标题自定义
cargo run -p window_title查看 CONTRIBUTING.md 了解更多详情。
请查看站点上的与 Iced、egui、Qt 6 的对比。
软件源码与文档中的代码示例适用 Apache-2.0。
Docs、Base、Component、Shell 各章节(含中文译文)中 GPUI Kit 有权授权的文档正文与原创图示,另以 CC BY 4.0 提供。复制或改编这些内容时,请署名 GPUI Kit、链接到原文页面及 CC BY 4.0 许可,并注明修改。既有 Apache-2.0 使用权持续有效;较早版本仍遵循当时的许可,第三方贡献未经权利人另外授权时保留原许可。仅学习概念或使用事实、未复制受版权保护的表达时,不因 CC BY 4.0 产生署名要求。