Root View

The Root component for as the root provider of GPUI Component features in a window. We must to use Root as the first level child of a window to enable GPUI Component features.

This is important, if we don’t use Root as the first level child of a window, there will have some unexpected behaviors.

fn main() {
    gpui_kit::application().run(move |cx| {
        // This must be called before using any GPUI Component features.
        gpui_kit::init(cx);

        cx.spawn(async move |cx| {
            cx.open_window(WindowOptions::default(), |window, cx| {
                let view = cx.new(|_| Example);
                // This first level on the window, should be a Root.
                cx.new(|cx| Root::new(view, window, cx))
            })
            .expect("Failed to open window");
        })
        .detach();
    });
}

#Window Border

By default, Root renders GPUI Component’s client-side window border wrapper. For layer-shell fullscreen windows or other surfaces that should not render this wrapper, disable it with bordered(false):

cx.new(|cx| Root::new(view, window, cx).bordered(false))

#Overlays

We have dialogs, sheets, notifications, we need placement for them to show, so Root provides methods to render these overlays:

• Root::render_dialog_layer - Render the current opened modals.
• Root::render_sheet_layer - Render the current opened drawers.
• Root::render_notification_layer - Render the notification list.

We can put these layers in the render method your first level view (Root > YourFirstView):

struct MyApp;

impl Render for MyApp {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .size_full()
            .child("My App Content")
            .children(Root::render_dialog_layer(cx))
            .children(Root::render_sheet_layer(cx))
            .children(Root::render_notification_layer(cx))
    }
}