Loading...
Loading...
Generates Rust code for GPUI desktop UI components following Zed editor patterns. Use when building desktop applications with gpui crate, creating themed UI components, implementing autocomplete/completions, building command palettes, or working with the gpui-component library. Covers RenderOnce components, Entity state management, theming with ActiveTheme, and Zed-style UI patterns.
npx skill4agent add terraphim/terraphim-skills gpui-componentsRenderOnceRenderActiveThemegpui-componentuse gpui::{Application, Window, Context, div, px, rgb};
use gpui_component::{init, Root, Theme};
fn main() {
Application::new().run(|cx| {
// Initialize gpui-component
gpui_component::init(cx);
cx.open_window(
WindowOptions::default(),
|window, cx| Root::new(MyApp::new(cx), window, cx)
);
});
}use gpui::{IntoElement, RenderOnce, Styled, div};
#[derive(IntoElement)]
pub struct MyButton {
label: SharedString,
variant: ButtonVariant,
}
impl RenderOnce for MyButton {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
div()
.px_3()
.py_2()
.bg(cx.theme().primary)
.text_color(cx.theme().primary_foreground)
.rounded_md()
.child(self.label)
}
}use gpui::{Entity, Render, Context};
pub struct Counter {
count: i32,
}
impl Render for Counter {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div()
.flex()
.gap_2()
.child(Button::new("dec").on_click(cx.listener(|this, _, _, cx| {
this.count -= 1;
cx.notify();
})))
.child(format!("Count: {}", self.count))
.child(Button::new("inc").on_click(cx.listener(|this, _, _, cx| {
this.count += 1;
cx.notify();
})))
}
}ButtonInputNumberInputCheckboxSwitchRadioSelectSliderDialogPopoverMenuPopupMenuTabAccordionSidebarDockBadgeAvatarIconLabelTooltipNotificationTableListVirtualListTreeChartuse gpui_component::ActiveTheme;
fn render(&mut self, window: &mut Window, cx: &mut App) -> impl IntoElement {
div()
.bg(cx.theme().background)
.text_color(cx.theme().foreground)
.border_1()
.border_color(cx.theme().border)
}// Background colors
cx.theme().background // Primary background
cx.theme().secondary // Secondary background
cx.theme().muted // Muted background
cx.theme().card // Card background
// Foreground colors
cx.theme().foreground // Primary text
cx.theme().muted_foreground // Muted text
// Semantic colors
cx.theme().primary // Primary accent
cx.theme().destructive // Danger/error
cx.theme().success // Success
cx.theme().warning // Warning
// Border colors
cx.theme().border // Default border
cx.theme().ring // Focus ringuse gpui_component::button::{Button, ButtonVariants};
Button::new("save")
.label("Save")
.icon(IconName::Save)
.primary()
.on_click(cx.listener(|this, _, window, cx| {
this.save(window, cx);
}))use gpui_component::input::{Input, InputState};
// Create state
let input_state = cx.new(|cx| InputState::new(cx));
// In render:
Input::new(&self.input_state)
.placeholder("Enter text...")
.cleanable(true)use gpui_component::menu::{PopupMenu, PopupMenuItem};
let menu = cx.new(|cx| {
PopupMenu::build(cx, |menu, window, cx| {
menu.menu_item(PopupMenuItem::new("New File")
.icon(IconName::FilePlus)
.action(Box::new(NewFile)))
.separator()
.menu_item(PopupMenuItem::new("Save")
.icon(IconName::Save)
.action(Box::new(Save)))
})
});use gpui_component::input::{CompletionProvider, InputState};
struct MyCompletionProvider;
impl CompletionProvider for MyCompletionProvider {
fn completions(
&self,
text: &Rope,
offset: usize,
trigger: CompletionContext,
window: &mut Window,
cx: &mut Context<InputState>,
) -> Task<Result<CompletionResponse>> {
let items = vec![
CompletionItem {
label: "option1".into(),
..Default::default()
},
];
Task::ready(Ok(CompletionResponse::Array(items)))
}
fn is_completion_trigger(
&self,
offset: usize,
new_text: &str,
cx: &mut Context<InputState>,
) -> bool {
new_text == "/" || new_text == "@"
}
}reference/components.mdreference/theming.mdreference/input-lsp.mdreference/menus.md[dependencies]
gpui = "0.2"
gpui-component = { version = "0.4", features = ["webview"] }use gpui::*;
use gpui_component::*;
struct App {
// state
}
impl Render for App {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
Root::new(
div()
.size_full()
.flex()
.flex_col()
.bg(cx.theme().background)
.child(self.render_toolbar(window, cx))
.child(self.render_content(window, cx)),
window,
cx
)
}
}
fn main() {
Application::new().run(|cx| {
gpui_component::init(cx);
cx.open_window(WindowOptions::default(), |window, cx| {
cx.new(|cx| App::new(cx))
});
});
}