Styling

Use documented builders for variants, ThemeBuilder::components for shared component appearance, theme tokens for colours, GPUI's styling methods for elements you own, and render closures for state-aware content.

Variants carry the intent

Use the documented builder first. Variants, sizes and colors are typed values, so the component API makes the available choices explicit. Use the hierarchy below to compare the meaning of each button variant:

1
2
3
4
5// Variants and sizes are enums, checked at compile time.
Button::new("edit")
    .label("Edit")
    .variant(Variant::Secondary)
    .size(Size::Lg)

How to style

Use a documented builder for variants, a theme token for shared values, and GPUI's styling methods for elements you own. There are no class strings to pass through.

The sx slot

Every component builder carries one sx slot for caller-owned low-level styling: GPUI's styling methods, refined over the component's root element after every value the variant and the theme chose, so an override wins. State-driven layers the component draws itself — a hover fade, a press scale — read the override where they can.

1
2
3
4
5// Every component carries one sx slot: GPUI's styling methods,
// refined over the root element after the theme's values.
Button::new("save")
    .label("Save")
    .sx(|el| el.bg(gpui::rgba(0xffa500ff)).text_color(gpui::rgba(0x000000ff)))

The radius helpers

Each component uses a specific radius step, so util exposes one helper per step rather than a single universal radius:

State-based styling

Components expose hover, press and disabled state through the Rust API. Use .hover() for an element you own, the built-in animation helpers for presses, and is_disabled for disabled controls.

1
2
3
4
5
6
7
8
9
10// .hover() styles an element you own; components do the same
// internally with anim::hover_fade, and a press is anim::pressed.
let colors = cx.colors();
let resting = colors.surface.background;
let hovered = colors.default.soft();

div()
    .id("row")
    .bg(resting)
    .hover(move |s| s.bg(hovered))

Render closures

Render closures let you draw a component part from the state or value the component already computed. The closure receives that value, so the caller does not need to re-derive it.

1
2
3
4
5// The closure is handed the value the component computed.
Slider::new("volume", 50.)
    .thumb(|index, value| {
        div().child(format!("thumb {index}: {value}")).into_any_element()
    })

Wrapper components

To standardize a set of props, return a configured builder from a function. Builders are plain Rust values, so the caller can still set every remaining option.

1
2
3
4
5
6
7/// A save button, everywhere the same.
fn save_button(id: impl Into<ElementId>) -> Button {
    Button::new(id).variant(Variant::Primary).child("Save")
}

// Still a `Button`, so the caller keeps every other prop.
save_button("save").is_pending(saving).full_width()

Style through the Rust API

The Button struct and its variant method select the look, part builders such as CardHeader place the pieces, and theme tokens supply the values.