Getting Started

Synth UI is a collection of beautifully designed, copy-paste UI components for GPUI desktop applications. You copy the .rs files into your own project — you own the code and can modify it freely.

Requirements

• Rust edition 2024
• gpui = "=0.2.2" (pinned — GPUI breaks API between minor versions)
• A theme crate with the design tokens (colors, spacing, radius)

Workspace layout

synth-ui/
├── crates/
│   ├── cli/             # The command-line tool (e.g. `synth-ui add button`)
│   ├── components/      # The source templates of the UI components
│   └── theme/           # Design tokens, color palettes, and typography
├── examples/            # A showcase application displaying all components
└── docs/                # This documentation site (VitePress)

Using a component

Every component is a stateless RenderOnce recipe. Wrap it in Component::new and drop it into your view tree:

use gpui::{Component, div, prelude::*};
use components::{Button, ButtonVariant};

impl Render for MyView {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .child(Component::new(
                Button::new("Click me")
                    .variant(ButtonVariant::Outline)
                    .on_click(cx.listener(|this, _, _, cx| {
                        // handle the click
                        cx.notify();
                    })),
            ))
    }
}

Design tokens

The theme crate exposes const color palettes and spacing/radius scales:

use theme::colors::{ZINC_900, WHITE};
use theme::spacing::SPACING_4;
use theme::radius::RADIUS_XL;

Styling helpers (px_2, py_1p5, rounded_md, border_1, gap_4, ...) are provided directly by GPUI's Styled trait — no extra imports needed.

Running the showcase

cargo run -p showcase

Opens a native window displaying every component. The docs site recreates the same UI in the browser on the Showcase page.