diff --git a/cpp/apps/primitives_gallery/main.cpp b/cpp/apps/primitives_gallery/main.cpp
index 82c6d477..c0e72250 100644
--- a/cpp/apps/primitives_gallery/main.cpp
+++ b/cpp/apps/primitives_gallery/main.cpp
@@ -14,6 +14,7 @@
 #include "core/page_header.h"
 #include "core/toast.h"
 #include "core/app_menubar.h"
+#include "core/tree_view.h"
 
 #include "demos.h"
 #include "demo.h"
@@ -90,35 +91,37 @@ static const DemoEntry* find_demo(const std::string& id) {
 }
 
 static void draw_sidebar() {
-    using namespace fn_tokens;
     ImGui::BeginChild("##gallery_sidebar", ImVec2(220, 0),
                       ImGuiChildFlags_Borders);
 
-    const char* current_category = nullptr;
-    for (int i = 0; i < k_demo_count; i++) {
-        const auto& d = k_demos[i];
-        if (!current_category || std::strcmp(current_category, d.category) != 0) {
-            if (current_category) ImGui::Dummy(ImVec2(0, spacing::sm));
-            ImGui::PushStyleColor(ImGuiCol_Text, colors::text_dim);
-            ImGui::TextUnformatted(d.category);
-            ImGui::PopStyleColor();
-            ImGui::Separator();
-            current_category = d.category;
+    // Agrupar por categoria como rama del tree_view (categorias abiertas por
+    // defecto). Cada demo es una hoja seleccionable.
+    int i = 0;
+    while (i < k_demo_count) {
+        const char* category = k_demos[i].category;
+
+        // Default-open la rama la primera vez que se abre el sidebar.
+        ImGui::SetNextItemOpen(true, ImGuiCond_FirstUseEver);
+        if (fn_ui::tree_branch_begin(category, category, /*selected=*/false)) {
+            // Recorrer todas las demos consecutivas con esta misma categoria.
+            while (i < k_demo_count
+                   && std::strcmp(k_demos[i].category, category) == 0) {
+                const auto& d = k_demos[i];
+                const bool selected = (g_selected_id == d.id);
+                fn_ui::tree_leaf(d.id, d.label, selected);
+                if (fn_ui::tree_node_clicked()) {
+                    g_selected_id = d.id;
+                }
+                i++;
+            }
+            fn_ui::tree_branch_end();
+        } else {
+            // Rama colapsada — saltar todos sus items.
+            while (i < k_demo_count
+                   && std::strcmp(k_demos[i].category, category) == 0) {
+                i++;
+            }
         }
-
-        const bool selected = (g_selected_id == d.id);
-        ImGui::PushStyleColor(ImGuiCol_Header,        selected ? colors::surface_hover : ImVec4(0,0,0,0));
-        ImGui::PushStyleColor(ImGuiCol_HeaderHovered, colors::surface_hover);
-        ImGui::PushStyleColor(ImGuiCol_HeaderActive,  colors::surface);
-        ImGui::PushStyleColor(ImGuiCol_Text,          selected ? colors::primary : colors::text);
-
-        char label[96];
-        std::snprintf(label, sizeof(label), "%s##sel_%s", d.label, d.id);
-        if (ImGui::Selectable(label, selected)) {
-            g_selected_id = d.id;
-        }
-
-        ImGui::PopStyleColor(4);
     }
 
     ImGui::EndChild();