UI components for building fantastic desktop applications using GPUI.
$ npx -y skills add longbridge/gpui-component --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
What's inside
UI components for building fantastic desktop applications using GPUI.
RenderOnce components, simple and user-friendly.Theme and ThemeColor, supporting multi-theme and variable-based configurations.xs, sm, md, and lg.https://longbridge.github.io/gpui-component/gallery/
Here is the first application: Longbridge Pro, built using GPUI Component.
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" }
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();
});
}
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.
The story crate is a gallery application that showcases all available components. Run it with:
cargo run
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
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.
| 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.
Apache-2.0
Release builds by use simple hello world example. โฉ
Iced Editor: https://github.com/iced-rs/iced/blob/db5a1f6353b9f8520c4f9633d1cdc90242c2afe1/graphics/src/text/editor.rs#L65-L68 โฉ
egui TextBuffer: https://github.com/emilk/egui/blob/0a81372cfd3a4deda640acdecbbaf24bf78bb6a2/crates/egui/src/widgets/text_edit/text_buffer.rs#L20 โฉ
_typos.toml
.cargo/
config.toml
.claude/
COMPONENT_TEST_RULES.md
skills/
gpui-component-dev/
references/
documentation.md
new-component.md
pr-description.md
story.md
SKILL.md
.github/
dependabot.yml
ISSUE_TEMPLATE/
01_bug.md
pull_request_template.md
workflows/
ci.yml
release-docs.yml
release.yml
test-docs.yml
.gitignore
.rustfmt.toml
.theme-schema.json
Cargo.lock
Cargo.toml
CLAUDE.md
CONTRIBUTING.md
crates/
assets/
assets/
.gitkeep
icons/
a-large-small.svg
arrow-down.svg
arrow-left.svg
arrow-right.svg
arrow-up.svg
asterisk.svg
battery-charging.svg
battery-full.svg
battery-low.svg
battery-medium.svg
battery-warning.svg
battery.svg
bell.svg
book-open.svg
bot.svg
building-2.svg
calendar.svg
case-sensitive.svg
chart-pie.svg
check.svg
chevron-down.svg
chevron-left.svg
chevron-right.svg
chevron-up.svg
chevrons-up-down.svg
circle-check.svg
circle-user.svg
circle-x.svg
close.svg
copy.svg
cpu.svg
dash.svg
delete.svg
ellipsis-vertical.svg
ellipsis.svg
external-link.svg
eye-off.svg
eye.svg
file.svg
folder-closed.svg
folder-open.svg
folder.svg
frame.svg
gallery-vertical-end.svg
github.svg
globe.svg
hard-drive.svg
heart-off.svg
heart.svg
inbox.svg
info.svg
inspector.svg
layout-dashboard.svg
loader-circle.svg
loader.svg
map.svg
maximize.svg
memory-stick.svg
menu.svg
minimize.svg
minus.svg
moon.svg
network.svg
palette.svg
panel-bottom-open.svg
panel-bottom.svg
panel-left-close.svg
panel-left-open.svg
panel-left.svg
panel-right-close.svg
panel-right-open.svg
panel-right.svg
pause.svg
play.svg
plus.svg
redo-2.svg
redo.svg
replace.svg
resize-corner.svg
search.svg
settings-2.svg
settings.svg
sort-ascending.svg
sort-descending.svg
square-terminal.svg
star-fill.svg
star-off.svg
star.svg
sun.svg
thumbs-down.svg
thumbs-up.svg
triangle-alert.svg
undo-2.svg
undo.svg
user.svg
window-close.svg
window-maximize.svg
window-minimize.svg
window-restore.svg
build.rs
Cargo.toml
README.md
src/
lib.rs
native_assets.rs
wasm_assets.rs
macros/
Cargo.toml
LICENSE-APACHE
src/
derive_into_plot.rs
lib.rs
story/
story-web/
.cargo/
config.toml
Cargo.toml
fonts/
JetBrainsMono-Regular.ttf
NotoEmoji-Regular.ttf
NotoSansSC-Regular-subset.ttf
OFL.txt
Makefile
README.md
rust-toolchain.toml
scripts/
build-wasm.sh
src/
lib.rs
www/
.gitignore
.prettierrc
bun.lock
index.html
package.json
src/
main.js
vite.config.js
Cargo.toml
examples/
brush.rs
dock.rs
editor.rs
fixtures/
completion_items.json
test.astro
test.c
test.go
test.html
test.js
test.json
test.kt
test.lua
test.md
test.nv
test.php
test.py
test.rb
test.rs
test.sql
test.svelte
test.ts
test.zig
html.rs
large-text.rs
markdown.rs
stream_markdown.rs
tiles.rs
locales/
ui.yml
src/
app_menus.rs
embedded_themes.rs
fixtures/
counters.json
countries.json
daily-devices.json
monthly-devices.json
radar-devices.json
stock-prices.json
tsla-income-statement.json
gallery.rs
lib.rs
main.rs
stories/
accordion_story.rs
alert_dialog_story.rs
alert_story.rs
avatar_story.rs
badge_story.rs
breadcrumb_story.rs
button_story.rs
calendar_story.rs
chart_story/
chart_story.rs
chart_story.rs
stacked_bar_chart.rs
checkbox_story.rs
clipboard_story.rs
collapsible_story.rs
color_picker_story.rs
combobox_story.rs
data_table_story.rs
date_picker_story.rs
description_list_story.rs
dialog_story.rs
dropdown_button_story.rs
editor_story.rs
form_story.rs
group_box_story.rs
hover_card_story.rs
icon_story.rs
image_story.rs
input_story.rs
kbd_story.rs
label_story.rs
list_story.rs
menu_story.rs
mod.rs
native_menu_story.rs
notification_story.rs
number_input_story.rs
otp_input_story.rs
pagination_story.rs
popover_story.rs
progress_story.rs
radio_story.rs
rating_story.rs
resizable_story.rs
scrollbar_story.rs
select_story.rs
separator_story.rs
settings_story.rs
sheet_story.rs
sidebar_story.rs
skeleton_story.rs
slider_story.rs
spinner_story.rs
status_bar_story.rs
stepper_story.rs
switch_story.rs
table_story.rs
tabs_story.rs
tag_story.rs
textarea_story.rs
theme_story/
checkerboard.rs
color_theme_story.rs
mapper.rs
mod.rs
toggle_story.rs
tooltip_story.rs
tree_story.rs
virtual_list_story.rs
welcome_story.rs
themes.rs
title_bar.rs
ui/
build.rs
Cargo.toml
LICENSE-APACHE
locales/
ui.yml
src/
accordion.rs
actions.rs
alert.rs
animation.rs
async_util.rs
avatar/
avatar_group.rs
avatar.rs
mod.rs
badge.rs
breadcrumb.rs
button/
button_group.rs
button_icon.rs
button.rs
dropdown_button.rs
mod.rs
toggle.rs
chart/
area_chart.rs
bar_chart.rs
candlestick_chart.rs
line_chart.rs
mod.rs
pie_chart.rs
radar_chart.rs
sankey_chart.rs
checkbox.rs
clipboard.rs
collapsible.rs
color_picker.rs
combobox.rs
description_list.rs
dialog/
alert_dialog.rs
content.rs
description.rs
dialog.rs
footer.rs
header.rs
mod.rs
title.rs
dock/
dock.rs
invalid_panel.rs
mod.rs
panel.rs
stack_panel.rs
state.rs
tab_panel.rs
tiles.rs
element_ext.rs
event.rs
fixtures/
layout.json
focus_trap.rs
form/
field.rs
form.rs
mod.rs
geometry.rs
global_state.rs
group_box.rs
highlighter/
diagnostics.rs
highlighter.rs
languages/
languages.rs
go/
highlights.scm
html/
highlights.scm
injections.scm
javascript/
highlights.scm
injections.scm
json/
highlights.scm
kotlin/
highlights.scm
lua/
highlights.scm
markdown/
markdown_inline/
highlights.scm
highlights.scm
injections.scm
php/
injections.scm
rust/
highlights.scm
injections.scm
README.md
typescript/
highlights.scm
zig/
highlights.scm
injections.scm
mod.rs
registry.rs
wasm_stub.rs
... 528 moreMake your AI assistant fluent in Longbridge โ ask about stock prices, your portfolio, news, and valuations in plain English, ไธญๆ, or ็น้ซ, and get answers backed by real Longbridge data.
@longbridgeFAQ
gpui-component is a Claude Code plugin with 3 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes gpui-component-dev, gpui-component, gpui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.