List is not shown on gpui_component v0.5.0

[babakou]

I have tried to show the list component based on the API Docs, but it has not been shown. Do I misundestand?

OS: Windows11 Home 25H2
Processor: Intel Core Ultra 5 225H
Target: x86_64-pc-windows-msvc

The entire source code is the following.

struct MyListDelegate {
    items: Vec<String>,
    selected_index: Option<gpui_component::IndexPath>,
}

struct MyList {
    state: gpui::Entity<gpui_component::list::ListState<MyListDelegate>>,
}

impl gpui_component::list::ListDelegate for MyListDelegate {
    type Item = gpui_component::list::ListItem;

    fn items_count(&self, _section: usize, _cx: &gpui::App) -> usize {
        self.items.len()
    }

    fn render_item(
            &mut self,
            ix: gpui_component::IndexPath,
            _window: &mut gpui::Window,
            _cx: &mut gpui::Context<gpui_component::list::ListState<Self>>,
        ) -> Option<Self::Item> {
        use gpui::*;

        self.items.get(ix.row).map(|item| {
            gpui_component::list::ListItem::new(ix)
                .child(gpui_component::label::Label::new(item.clone()))
                .selected(Some(ix) == self.selected_index)
        })
    }

    fn set_selected_index(
            &mut self,
            ix: Option<gpui_component::IndexPath>,
            _window: &mut gpui::Window,
            cx: &mut gpui::Context<gpui_component::list::ListState<Self>>,
        ) {
        self.selected_index = ix;
        cx.notify();
    }
}

impl gpui::Render for MyList {
    fn render(&mut self, _window: &mut gpui::Window, _cx: &mut gpui::Context<Self>) -> impl gpui::IntoElement {
        use gpui::*;

        div().child(gpui_component::list::List::new(&self.state))
    }
}

fn main() {
    use gpui::AppContext;

    let app = gpui::Application::new();

    app.run(move |cx: &mut gpui::App| {
        // This must be called before using any GPUI Component features.
        gpui_component::init(cx);

        let window_options = gpui::WindowOptions {
            window_bounds: Some(gpui::WindowBounds::centered(gpui::size(gpui::px(400.), gpui::px(200.)), cx)),
            ..Default::default()
        };
        cx.open_window(window_options, |window, cx| {
            let list_delegate = MyListDelegate {
                items: vec!["foo".into(), "bar".into(), "fuga".into()],
                selected_index: None,
            };

            let list_state = cx.new(|cx| gpui_component::list::ListState::new(list_delegate, window, cx));
            let view = cx.new(|_| MyList { state: list_state });

            // This first level on the window, should be a Root.
            cx.new(|cx| gpui_component::Root::new(view, window, cx))
        }).unwrap();
    });
}

And the Cargo.toml is the following.

[package]
name = "hello-gpui"
version = "0.1.0"
edition = "2024"

[dependencies]
gpui = { version = "0.2.2" }
gpui-component = { version = "0.5.0" }
anyhow = { version = "1.0.100" }

It is appreciated if you give me any helps.
Thanks!

[aditya-cherukuru]

You are not misunderstanding the API. Your ListDelegate and state wiring are correct. The list is not visible due to a layout sizing issue, which is expected behavior in GPUI.

---

Root Cause

In GPUI, widgets do not auto-size. A component only renders if its parent provides a concrete size.

In your case:

div().child(gpui_component::list::List::new(&self.state))

• div() has no height or flex rules
• List does not define its own height
• Layout resolves to 0px height, so nothing is drawn

This happens silently (no warnings or panics).

---

Fix (Recommended)

Give the container and the list a size using flex layout.

Corrected Render Implementation

impl gpui::Render for MyList {
    fn render(
        &mut self,
        _window: &mut gpui::Window,
        _cx: &mut gpui::Context<Self>,
    ) -> impl gpui::IntoElement {
        use gpui::*;

        div()
            .flex_col()
            .flex_grow(1.0)
            .child(
                gpui_component::list::List::new(&self.state)
                    .flex_grow(1.0),
            )
    }
}

This ensures:

• The root container grows
• The list fills available vertical space

After this change, the list renders correctly.

---

Alternative Solutions

Any of the following are also valid:

Explicit Height

div()
    .height(px(200.0))
    .child(gpui_component::list::List::new(&self.state))

Scroll View Wrapper

gpui_component::scroll::ScrollView::new(
    gpui_component::list::List::new(&self.state)
)

• The API docs focus on delegate/state setup
• Layout constraints are implicit and easy to overlook
• This behavior applies to all GPUI components, not just List

This may be worth adding as a documentation note for the List component examples.

[babakou]

@aditya-cherukuru
Thank you for your answer!

The list was rendered correctly by specifying height explicitly.
Other solutions did not work for me.

impl gpui::Render for MyList {
    fn render(&mut self, _window: &mut gpui::Window, _cx: &mut gpui::Context<Self>) -> impl gpui::IntoElement {
        use gpui::*;

        div()
            .h(px(200.0)) //Specify height explicitly
            .child(gpui_component::list::List::new(&self.state))
    }
}