Quick start

Base GPUI is under active development. APIs may change before version 1.0. Install it from GitHub, as is common for projects using GPUI's actively developed Git revision.

#Installation

Add the crate alongside the GPUI revision it is built against:

[dependencies]
base-gpui = { git = "https://github.com/LukeTandjung/base-gpui" }
gpui = { git = "https://github.com/zed-industries/zed", rev = "1764c2fa6776c545ece60357e0e6dd9856a241bc" }

#Initialize

Initialize Base GPUI when your application starts. This registers the key bindings components dispatch against.

use gpui::{App, Application};

fn main() {
    Application::new().run(|cx: &mut App| {
        base_gpui::init(cx);
        // Open your application window.
    });
}

#Compose a component

Components expose compound parts and state-aware styling. Tabs are composed from TabsRoot, TabsList, TabsTab, TabsIndicator, and TabsPanel rather than a single pre-styled widget.

use base_gpui::tabs::{TabsList, TabsPanel, TabsRoot, TabsTab};
use gpui::prelude::*;
use gpui::px;

TabsRoot::<&'static str>::new()
    .id("settings")
    .default_value(Some("overview"))
    .child(
        TabsList::new()
            .aria_label("Project sections")
            .child(
                TabsTab::new()
                    .id("overview")
                    .value("overview")
                    .px(px(12.))
                    .py(px(6.))
                    .style_with_state(|state, tab| {
                        if state.active { tab.text_color(gpui::white()) } else { tab }
                    })
                    .child("Overview"),
            ),
    );

#Styling

Nothing ships with visual design. Every part that draws exposes .style_with_state(...), which receives that part's behavioral state and the GPUI Div being built:

SwitchRoot::new()
    .style_with_state(|state, root| {
        root.bg(if state.checked { accent() } else { control() })
    });

State-state structs are component-specific public API — the GPUI equivalent of Base UI's state-aware className and render callbacks. Data attributes and CSS variable APIs are deliberately not ported.

#Examples

Every component guide embeds an example: the actual GPUI component compiled to WebAssembly and rendered through GPUI's WebGPU backend. The build is threaded, so it needs cross-origin isolation — locally the trunk dev server sends the COOP and COEP headers, and on GitHub Pages a service worker injects them on first visit.

An example needs a browser that exposes WebGPU. Where it is missing, the example region explains how to run the same demo natively instead.

#Component guides

Every component has a guide covering its anatomy, each compound part, every builder with the exact values it accepts, and its accessibility model. Start with Switch for a small component, or Tabs for a compound one with keyboard behavior.

#Project relationships

Base GPUI is an independent community project. It is not affiliated with, endorsed by, or maintained by the Base UI or Zed teams.

• Base UI inspired the component API design.
• GPUI is the underlying application framework.