From 6d75cb27484aa4b580e3afcd6b75140ae605cbd3 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Sun, 9 May 2021 20:32:27 +0200
Subject: [PATCH 1/8] Make component more functionnal

---
 CMakeLists.txt                                |   2 +-
 doc/example_list.md                           |   1 +
 doc/mainpage.md                               |   9 +-
 examples/component/CMakeLists.txt             |   1 +
 examples/component/button.cpp                 |  58 +--
 examples/component/checkbox.cpp               |  40 +-
 examples/component/checkbox_in_frame.cpp      |  57 ++-
 examples/component/gallery.cpp                | 161 +++----
 examples/component/homescreen.cpp             | 288 +++++------
 examples/component/input.cpp                  |  57 +--
 examples/component/menu.cpp                   |  28 +-
 examples/component/menu2.cpp                  | 140 +++---
 examples/component/menu_style.cpp             | 136 +++---
 examples/component/modal_dialog.cpp           | 152 +++---
 examples/component/radiobox.cpp               |  15 +-
 examples/component/radiobox_in_frame.cpp      |  29 +-
 examples/component/slider.cpp                 |  78 +--
 examples/component/tab_horizontal.cpp         | 116 ++---
 examples/component/tab_vertical.cpp           | 117 +++--
 examples/component/toggle.cpp                 |  93 ++--
 examples/index.html                           |  11 +-
 examples/util/print_key_press.cpp             |  22 +-
 include/ftxui/component/button.hpp            |  29 +-
 include/ftxui/component/checkbox.hpp          |  25 +-
 include/ftxui/component/component.hpp         |  92 ++--
 include/ftxui/component/component_base.hpp    |  81 ++++
 include/ftxui/component/container.hpp         |  24 +-
 include/ftxui/component/event.hpp             |   4 +-
 include/ftxui/component/input.hpp             |  25 +-
 include/ftxui/component/menu.hpp              |  29 +-
 include/ftxui/component/radiobox.hpp          |  28 +-
 .../ftxui/component/screen_interactive.hpp    |  15 +-
 include/ftxui/component/slider.hpp            |  23 -
 include/ftxui/component/toggle.hpp            |  27 +-
 iwyu.imp                                      |   3 +
 src/ftxui/component/button.cpp                |  47 +-
 src/ftxui/component/checkbox.cpp              |  51 +-
 src/ftxui/component/component.cpp             |  93 ++--
 src/ftxui/component/container.cpp             |  80 +++-
 src/ftxui/component/container_test.cpp        | 448 +++++++++---------
 src/ftxui/component/event.cpp                 |   7 +-
 src/ftxui/component/input.cpp                 |  93 ++--
 src/ftxui/component/input_test.cpp            | 222 +++++----
 src/ftxui/component/menu.cpp                  |  96 ++--
 src/ftxui/component/radiobox.cpp              |  90 +++-
 src/ftxui/component/radiobox_test.cpp         | 156 +++---
 src/ftxui/component/screen_interactive.cpp    |  41 +-
 src/ftxui/component/slider.cpp                |  77 +--
 src/ftxui/component/toggle.cpp                |  58 ++-
 src/ftxui/component/toggle_test.cpp           | 170 +++----
 src/ftxui/dom/blink.cpp                       |  13 +-
 src/ftxui/dom/bold.cpp                        |  13 +-
 src/ftxui/dom/border.cpp                      |  11 +-
 src/ftxui/dom/clear_under.cpp                 |  13 +-
 src/ftxui/dom/color.cpp                       |  13 +-
 src/ftxui/dom/composite_decorator.cpp         |   4 +-
 src/ftxui/dom/dim.cpp                         |  13 +-
 src/ftxui/dom/flex.cpp                        |  14 +-
 src/ftxui/dom/frame.cpp                       |   9 +-
 src/ftxui/dom/gauge.cpp                       |  11 +-
 src/ftxui/dom/inverted.cpp                    |  13 +-
 src/ftxui/dom/node_decorator.cpp              |   5 +-
 src/ftxui/dom/reflect.cpp                     |  15 +-
 src/ftxui/dom/separator.cpp                   |  11 +-
 src/ftxui/dom/size.cpp                        |  11 +-
 src/ftxui/dom/spinner.cpp                     |  12 +-
 src/ftxui/dom/text_test.cpp                   |   7 +-
 src/ftxui/dom/underlined.cpp                  |  13 +-
 src/ftxui/screen/screen.cpp                   |   3 +-
 tools/license_headers.cpp                     |   2 +-
 70 files changed, 2182 insertions(+), 1769 deletions(-)
 create mode 100644 include/ftxui/component/component_base.hpp
 delete mode 100644 include/ftxui/component/slider.hpp

diff --git a/CMakeLists.txt b/CMakeLists.txt
index f1cc6b97..e9f9bd9f 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -80,6 +80,7 @@ add_library(component
   include/ftxui/component/captured_mouse.hpp
   include/ftxui/component/checkbox.hpp
   include/ftxui/component/component.hpp
+  include/ftxui/component/component_base.hpp
   include/ftxui/component/container.hpp
   include/ftxui/component/event.hpp
   include/ftxui/component/input.hpp
@@ -88,7 +89,6 @@ add_library(component
   include/ftxui/component/radiobox.hpp
   include/ftxui/component/receiver.hpp
   include/ftxui/component/screen_interactive.hpp
-  include/ftxui/component/slider.hpp
   include/ftxui/component/toggle.hpp
   src/ftxui/component/button.cpp
   src/ftxui/component/checkbox.cpp
diff --git a/doc/example_list.md b/doc/example_list.md
index efddeab1..5f654036 100644
--- a/doc/example_list.md
+++ b/doc/example_list.md
@@ -34,6 +34,7 @@
 @example ./examples/component/input.cpp
 @example ./examples/component/homescreen.cpp
 @example ./examples/component/radiobox.cpp
+@example ./examples/component/slider_rgb.cpp
 @example ./examples/component/menu.cpp
 @example ./examples/component/menu_style.cpp
 @example ./examples/component/radiobox_in_frame.cpp
diff --git a/doc/mainpage.md b/doc/mainpage.md
index 672fda19..94fe5d8a 100644
--- a/doc/mainpage.md
+++ b/doc/mainpage.md
@@ -31,7 +31,7 @@ int main(void) {
     Dimension::Fit(document) // Height
   );
   Render(screen, document);
-  std::cout << screen.ToString() << std::endl;
+  screen.Print();
 
   return EXIT_SUCCESS;
 }
@@ -142,6 +142,13 @@ This provides:
 3. A predefined implementation of "keyboard navigation".
 4. A set of predefined widget: CheckBox, RadioBox, Input, Menu, Toggle.
 
+
+**List of Component**
+
+You only need one header: ftxui/dom/component.hpp
+
+\include ftxui/component/component.hpp
+
 # ftxui/dom
 
 Every elements of the dom are declared from:
diff --git a/examples/component/CMakeLists.txt b/examples/component/CMakeLists.txt
index 07dc0b31..3f4e5f15 100644
--- a/examples/component/CMakeLists.txt
+++ b/examples/component/CMakeLists.txt
@@ -17,6 +17,7 @@ example(modal_dialog)
 example(radiobox)
 example(radiobox_in_frame)
 example(slider)
+example(slider_rgb)
 example(tab_horizontal)
 example(tab_vertical)
 example(toggle)
diff --git a/examples/component/button.cpp b/examples/component/button.cpp
index dc3ceaf1..2716d5c5 100644
--- a/examples/component/button.cpp
+++ b/examples/component/button.cpp
@@ -1,51 +1,43 @@
-#include <functional>  // for function
-#include <memory>      // for unique_ptr, make_u...
-#include <string>      // for wstring
-#include <utility>     // for move
-#include <vector>      // for vector
+#include <string>  // for operator+, to_wstring, allocator, wstring
 
-#include "ftxui/component/button.hpp"              // for Button
-#include "ftxui/component/component.hpp"           // for Component
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Button, Make
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/container.hpp"           // for Container
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/screen/box.hpp"                    // for ftxui
+#include "ftxui/dom/elements.hpp"  // for separator, Element, gauge, text, operator|, vbox, border
 
 using namespace ftxui;
 
-class MyComponent : public Component {
+class MyComponent : public ComponentBase {
  private:
-  std::vector<std::unique_ptr<Button>> buttons_;
-  Container container_ = Container::Horizontal();
+  std::wstring label_add = L"Increase";
+  std::wstring label_rm = L"Decrease";
+  int value_ = 50;
 
  public:
   MyComponent() {
-    Add(&container_);
+    Add(Container::Horizontal({
+        Button(&label_rm, [&] { value_--; }),
+        Button(&label_add, [&] { value_++; }),
+    }));
+  }
 
-    auto button_add = std::make_unique<Button>();
-    auto button_remove = std::make_unique<Button>();
-    container_.Add(button_add.get());
-    container_.Add(button_remove.get());
-    button_add->label = L"Add one button";
-    button_remove->label = L"Remove last button";
-
-    button_add->on_click = [&] {
-      auto extra_button = std::make_unique<Button>();
-      extra_button->label = L"extra button";
-      container_.Add(extra_button.get());
-      buttons_.push_back(std::move(extra_button));
-    };
-
-    button_remove->on_click = [&] { buttons_.resize(buttons_.size() - 1); };
-
-    buttons_.push_back(std::move(button_add));
-    buttons_.push_back(std::move(button_remove));
+  Element Render() override {
+    return vbox({
+               text(L"Value = " + std::to_wstring(value_)),
+               separator(),
+               gauge(value_ * 0.01f),
+               separator(),
+               ComponentBase::Render(),
+           }) |
+           border;
   }
 };
 
 int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  screen.Loop(&component);
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(Make<MyComponent>());
   return 0;
 }
 
diff --git a/examples/component/checkbox.cpp b/examples/component/checkbox.cpp
index 47189b64..4eb51b11 100644
--- a/examples/component/checkbox.cpp
+++ b/examples/component/checkbox.cpp
@@ -1,34 +1,34 @@
 #include "ftxui/component/checkbox.hpp"
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Checkbox, Make
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
 
 using namespace ftxui;
 
-class MyComponent : public Component {
+class MyComponent : public ComponentBase {
  private:
-  CheckBox box_1_;
-  CheckBox box_2_;
-  CheckBox box_3_;
-  Container container_ = Container::Vertical();
+  std::wstring build_examples_label = L"Build examples";
+  std::wstring build_tests_label = L"Build tests";
+  std::wstring use_webassembly_label = L"Use WebAssembly";
+
+  bool build_examples_state = false;
+  bool build_tests_state = false;
+  bool use_webassembly_state = true;
+
+  Component container = Container::Vertical({
+      Checkbox(&build_examples_label, &build_examples_state),
+      Checkbox(&build_tests_label, &build_tests_state),
+      Checkbox(&use_webassembly_label, &use_webassembly_state),
+  });
 
  public:
-  MyComponent() {
-    Add(&container_);
-    container_.Add(&box_1_);
-    container_.Add(&box_2_);
-    container_.Add(&box_3_);
-    box_1_.label = L"Build examples";
-    box_2_.label = L"Build tests";
-    box_3_.label = L"Use WebAssembly";
-    box_3_.state = true;
-  }
+  MyComponent() { Add(container); }
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>());
   return 0;
 }
 
diff --git a/examples/component/checkbox_in_frame.cpp b/examples/component/checkbox_in_frame.cpp
index c1f0f961..1af542b7 100644
--- a/examples/component/checkbox_in_frame.cpp
+++ b/examples/component/checkbox_in_frame.cpp
@@ -1,50 +1,61 @@
-#include <memory>   // for allocator_traits<>...
-#include <string>   // for operator+, wstring
-#include <utility>  // for move
-#include <vector>   // for vector
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>  // for unique_ptr, make_unique, __shared_ptr_access
+#include <string>  // for operator+, wstring
+#include <vector>  // for vector
 
-#include "ftxui/component/checkbox.hpp"            // for CheckBox
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"                  // for Element, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/string.hpp"                 // for to_wstring
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Checkbox, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, operator|, size, vbox, border, frame, Elements, HEIGHT, LESS_THAN
+#include "ftxui/screen/string.hpp"  // for to_wstring
 
 using namespace ftxui;
 
-class MyComponent : public Component {
+struct CheckboxAndState {
+  std::wstring label;
+  bool state;
+  Component component;
+};
+
+std::unique_ptr<CheckboxAndState> MakeCheckbox(std::wstring label) {
+  auto out = std::make_unique<CheckboxAndState>();
+  out->label = label;
+  out->state = false;
+  out->component = Checkbox(&out->label, &out->state);
+  return out;
+}
+
+class MyComponent : public ComponentBase {
  public:
   MyComponent() {
-    Add(&container);
+    Add(container);
     checkbox.resize(30);
     for (int i = 0; i < checkbox.size(); ++i) {
-      checkbox[i].label = (L"CheckBox " + to_wstring(i));
-      container.Add(&checkbox[i]);
+      checkbox[i] = MakeCheckbox(L"CheckBox " + to_wstring(i));
+      container->Add(checkbox[i]->component);
     }
   }
 
   // clang-format off
   Element Render() override {
     Elements content;
-    for (auto& it : checkbox) {
-      content.push_back(it.Render());
-    }
-    return vbox(std::move(content))
+    return vbox(container->Render())
       | frame
       | size(HEIGHT, LESS_THAN, 10)
       | border;
   }
 
  private:
-  std::vector<CheckBox> checkbox;
-  Container container = Container::Vertical();
+  std::vector<std::unique_ptr<CheckboxAndState>> checkbox;
+  Component container = Container::Vertical();
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
-  MyComponent component;
-  screen.Loop(&component);
+  auto my_component = Make<MyComponent>();
+  screen.Loop(my_component);
 
   return 0;
 }
diff --git a/examples/component/gallery.cpp b/examples/component/gallery.cpp
index d819c54c..329a7ec7 100644
--- a/examples/component/gallery.cpp
+++ b/examples/component/gallery.cpp
@@ -1,82 +1,81 @@
 #include <functional>  // for function
-#include <memory>      // for allocator, unique_ptr
-#include <string>      // for wstring
+#include <memory>      // for allocator, __shared_ptr_access
+#include <string>      // for wstring, basic_string
 #include <vector>      // for vector
 
-#include "ftxui/component/button.hpp"              // for Button
-#include "ftxui/component/checkbox.hpp"            // for CheckBox
-#include "ftxui/component/component.hpp"           // for Component, Compone...
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/input.hpp"               // for Input
-#include "ftxui/component/menu.hpp"                // for Menu
-#include "ftxui/component/radiobox.hpp"            // for RadioBox
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/component/slider.hpp"              // for Slider
-#include "ftxui/component/toggle.hpp"              // for Toggle
-#include "ftxui/dom/elements.hpp"                  // for separator, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Slider, Checkbox, Button, Input, Make, Menu, Radiobox, Toggle
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, operator|, Element, size, xflex, text, WIDTH, hbox, vbox, EQUAL, LESS_THAN, border, GREATER_THAN
 
 using namespace ftxui;
 
-class MyComponent : public Component {
-  Container container = Container::Vertical();
-  Menu menu;
-  Toggle toggle;
-  Container checkbox_container = Container::Vertical();
-  CheckBox checkbox1;
-  CheckBox checkbox2;
-  RadioBox radiobox;
-  Input input;
-  Button button;
+class MyComponent : public ComponentBase {
+  const std::vector<std::wstring> menu_entries_ = {
+      L"Menu 1",
+      L"Menu 2",
+      L"Menu 3",
+      L"Menu 4",
+  };
+  int menu_selected_ = 0;
+  Component menu_ = Menu(&menu_entries_, &menu_selected_);
+
+  int toggle_selected_ = 0;
+  std::vector<std::wstring> toggle_entries_ = {
+      L"Toggle_1",
+      L"Toggle_2",
+  };
+  Component toggle_ = Toggle(&toggle_entries_, &toggle_selected_);
+
+  std::wstring checkbox_1_label_ = L"checkbox1";
+  std::wstring checkbox_2_label_ = L"checkbox2";
+  bool checkbox_1_selected_ = false;
+  bool checkbox_2_selected_ = false;
+
+  Component checkbox_container_ = Container::Vertical({
+      Checkbox(&checkbox_1_label_, &checkbox_1_selected_),
+      Checkbox(&checkbox_2_label_, &checkbox_2_selected_),
+  });
+
+  int radiobox_selected_ = 0;
+  std::vector<std::wstring> radiobox_entries_ = {
+      L"Radiobox 1",
+      L"Radiobox 2",
+      L"Radiobox 3",
+      L"Radiobox 4",
+  };
+  Component radiobox_ = Radiobox(&radiobox_entries_, &radiobox_selected_);
+
+  std::wstring input_label_;
+  std::wstring input_placeholder_ = L"input";
+  Component input_ = Input(&input_label_, &input_placeholder_);
+
+  std::wstring button_label_ = L"Quit";
+  std::function<void()> on_button_clicked_;
+  Component button_ = Button(&button_label_, [this] { on_button_clicked_(); });
 
   int slider_value_1_ = 12;
   int slider_value_2_ = 56;
   int slider_value_3_ = 128;
-  ComponentPtr slider_1_ = Slider(L"R:", &slider_value_1_, 0, 256, 1);
-  ComponentPtr slider_2_ = Slider(L"G:", &slider_value_2_, 0, 256, 1);
-  ComponentPtr slider_3_ = Slider(L"B:", &slider_value_3_, 0, 256, 1);
+  Component slider_container_ = Container::Vertical({
+      Slider(L"R:", &slider_value_1_, 0, 256, 1),
+      Slider(L"G:", &slider_value_2_, 0, 256, 1),
+      Slider(L"B:", &slider_value_3_, 0, 256, 1),
+  });
 
  public:
-  MyComponent() {
-    Add(&container);
-    menu.entries = {
-        L"Menu 1",
-        L"Menu 2",
-        L"Menu 3",
-        L"Menu 4",
-    };
-    container.Add(&menu);
-
-    toggle.entries = {
-        L"Toggle_1",
-        L"Toggle_2",
-    };
-    container.Add(&toggle);
-
-    container.Add(&checkbox_container);
-    checkbox1.label = L"checkbox1";
-    checkbox_container.Add(&checkbox1);
-    checkbox2.label = L"checkbox2";
-    checkbox_container.Add(&checkbox2);
-
-    radiobox.entries = {
-        L"Radiobox 1",
-        L"Radiobox 2",
-        L"Radiobox 3",
-        L"Radiobox 4",
-    };
-    container.Add(&radiobox);
-
-    input.placeholder = L"Input placeholder";
-    container.Add(&input);
-
-    container.Add(slider_1_.get());
-    container.Add(slider_2_.get());
-    container.Add(slider_3_.get());
-
-    button.label = L"Quit";
-    button.on_click = [&] { on_quit(); };
-    container.Add(&button);
+  MyComponent(std::function<void(void)> on_quit) : on_quit_(on_quit) {
+    Add(Container::Vertical({
+        menu_,
+        toggle_,
+        checkbox_container_,
+        radiobox_,
+        input_,
+        slider_container_,
+        button_,
+    }));
   }
 
   Element Render(std::wstring name, Element element) {
@@ -89,42 +88,36 @@ class MyComponent : public Component {
   }
 
   Element Render(std::wstring name, Component& component) {
-    return Render(name, component.Render());
+    return Render(name, component->Render());
   }
 
   Element Render() override {
     return  //
         vbox({
-            Render(L"menu", menu),
+            Render(L"menu", menu_),
             separator(),
-            Render(L"toggle", toggle),
+            Render(L"toggle", toggle_),
             separator(),
-            Render(L"checkbox", checkbox_container),
+            Render(L"checkbox", checkbox_container_),
             separator(),
-            Render(L"radiobox", radiobox),
+            Render(L"radiobox", radiobox_),
             separator(),
-            Render(L"input", input) | size(WIDTH, LESS_THAN, 50),
+            Render(L"input", input_) | size(WIDTH, LESS_THAN, 50),
             separator(),
-            Render(L"slider",  //
-                   vbox({
-                       slider_1_->Render(),
-                       slider_2_->Render(),
-                       slider_3_->Render(),
-                   })),
+            Render(L"slider", slider_container_),
             separator(),
-            Render(L"button", button),
+            Render(L"button", button_),
         }) |
         xflex | size(WIDTH, GREATER_THAN, 40) | border;
   }
 
-  std::function<void()> on_quit = [] {};
+  std::function<void()> on_quit_;
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
-  MyComponent component;
-  component.on_quit = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  auto component = Make<MyComponent>(screen.ExitLoopClosure());
+  screen.Loop(component);
 
   return 0;
 }
diff --git a/examples/component/homescreen.cpp b/examples/component/homescreen.cpp
index b6c49c79..407e11b5 100644
--- a/examples/component/homescreen.cpp
+++ b/examples/component/homescreen.cpp
@@ -1,23 +1,22 @@
-#include <chrono>      // for operator""s, chron...
+#include <array>       // for array
+#include <chrono>      // for operator""s, chrono_literals
 #include <cmath>       // for sin
-#include <functional>  // for ref, reference_wra...
-#include <string>      // for allocator, wstring
-#include <thread>      // for sleep_for, thread
-#include <utility>     // for move
-#include <vector>      // for vector
+#include <functional>  // for ref, reference_wrapper, function
+#include <memory>      // for make_shared, __shared_ptr_access
+#include <string>  // for allocator, wstring, basic_string, operator+, to_wstring
+#include <thread>   // for sleep_for, thread
+#include <utility>  // for move
+#include <vector>   // for vector
 
-#include "ftxui/component/checkbox.hpp"            // for CheckBox
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/event.hpp"               // for Event, Event::Custom
-#include "ftxui/component/input.hpp"               // for Input
-#include "ftxui/component/menu.hpp"                // for Menu
-#include "ftxui/component/radiobox.hpp"            // for RadioBox
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/component/toggle.hpp"              // for Toggle
-#include "ftxui/dom/elements.hpp"                  // for text, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/color.hpp"                  // for Color, Color::Blue...
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Checkbox, Input, Menu, Radiobox, Toggle
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/event.hpp"           // for Event, Event::Custom
+#include "ftxui/component/input.hpp"           // for InputBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, operator|, color, bgcolor, Element, filler, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, Elements, HEIGHT, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
+#include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
 
 using namespace ftxui;
 
@@ -39,7 +38,7 @@ class Graph {
   }
 };
 
-class HTopComponent : public Component {
+class HTopComponent : public ComponentBase {
   Graph my_graph;
 
  public:
@@ -102,110 +101,121 @@ class HTopComponent : public Component {
   }
 };
 
-class CompilerComponent : public Component {
-  Container container = Container::Horizontal();
-  RadioBox compiler;
-  Container flag = Container::Vertical();
-  CheckBox flag_checkbox[4];
-  Container subcontainer = Container::Vertical();
-  Container input_container = Container::Horizontal();
-  Input input_add;
-  Menu input;
-  Input executable;
+const std::vector<std::wstring> compiler_entries = {
+    L"gcc",
+    L"clang",
+    L"emcc",
+    L"game_maker",
+    L"Ada compilers",
+    L"ALGOL 60 compilers",
+    L"ALGOL 68 compilers",
+    L"Assemblers (Intel *86)",
+    L"Assemblers (Motorola 68*)",
+    L"Assemblers (Zilog Z80)",
+    L"Assemblers (other)",
+    L"BASIC Compilers",
+    L"BASIC interpreters",
+    L"Batch compilers",
+    L"C compilers",
+    L"Source-to-source compilers",
+    L"C++ compilers",
+    L"C# compilers",
+    L"COBOL compilers",
+    L"Common Lisp compilers",
+    L"D compilers",
+    L"DIBOL/DBL compilers",
+    L"ECMAScript interpreters",
+    L"Eiffel compilers",
+    L"Fortran compilers",
+    L"Go compilers",
+    L"Haskell compilers",
+    L"Java compilers",
+    L"Pascal compilers",
+    L"Perl Interpreters",
+    L"PHP compilers",
+    L"PL/I compilers",
+    L"Python compilers",
+    L"Scheme compilers and interpreters",
+    L"Smalltalk compilers",
+    L"Tcl Interpreters",
+    L"VMS Interpreters",
+    L"Rexx Interpreters",
+    L"CLI compilers",
+};
+
+class CompilerComponent : public ComponentBase {
+  int compiler_selected = 0;
+  Component compiler = Radiobox(&compiler_entries, &compiler_selected);
+
+  std::array<std::wstring, 4> options_label = {
+      L"-Wall",
+      L"-Werror",
+      L"-lpthread",
+      L"-O3",
+  };
+  std::array<bool, 4> options_state = {
+      false,
+      false,
+      false,
+      false,
+  };
+  std::wstring input_add_content = L"";
+  std::wstring input_add_placeholder = L"input_files";
+  Component input_add = Input(&input_add_content, &input_add_placeholder);
+
+  std::vector<std::wstring> input_entries;
+  int input_selected = 0;
+  Component input = Menu(&input_entries, &input_selected);
+
+  std::wstring executable_content_ = L"";
+  std::wstring executable_placeholder_ = L"executable";
+  Component executable_ = Input(&executable_content_, &executable_placeholder_);
+
+  Component flags = Container::Vertical({
+      Checkbox(&options_label[0], &options_state[0]),
+      Checkbox(&options_label[1], &options_state[1]),
+      Checkbox(&options_label[2], &options_state[2]),
+      Checkbox(&options_label[3], &options_state[3]),
+  });
 
  public:
   ~CompilerComponent() override {}
   CompilerComponent() {
-    Add(&container);
+    Add(Container::Horizontal({
+        compiler,
+        flags,
+        Container::Vertical({
+            executable_,
+            Container::Horizontal({
+                input_add,
+                input,
+            }),
+        }),
+    }));
 
-    // Compiler ----------------------------------------------------------------
-    compiler.entries = {
-        L"gcc",
-        L"clang",
-        L"emcc",
-        L"game_maker",
-        L"Ada compilers",
-        L"ALGOL 60 compilers",
-        L"ALGOL 68 compilers",
-        L"Assemblers (Intel *86)",
-        L"Assemblers (Motorola 68*)",
-        L"Assemblers (Zilog Z80)",
-        L"Assemblers (other)",
-        L"BASIC Compilers",
-        L"BASIC interpreters",
-        L"Batch compilers",
-        L"C compilers",
-        L"Source-to-source compilers",
-        L"C++ compilers",
-        L"C# compilers",
-        L"COBOL compilers",
-        L"Common Lisp compilers",
-        L"D compilers",
-        L"DIBOL/DBL compilers",
-        L"ECMAScript interpreters",
-        L"Eiffel compilers",
-        L"Fortran compilers",
-        L"Go compilers",
-        L"Haskell compilers",
-        L"Java compilers",
-        L"Pascal compilers",
-        L"Perl Interpreters",
-        L"PHP compilers",
-        L"PL/I compilers",
-        L"Python compilers",
-        L"Scheme compilers and interpreters",
-        L"Smalltalk compilers",
-        L"Tcl Interpreters",
-        L"VMS Interpreters",
-        L"Rexx Interpreters",
-        L"CLI compilers",
+    InputBase::From(input_add)->on_enter = [this] {
+      input_entries.push_back(input_add_content);
+      input_add_content = L"";
     };
-    container.Add(&compiler);
-
-    // Flags    ----------------------------------------------------------------
-    container.Add(&flag);
-    flag_checkbox[0].label = L"-Wall";
-    flag_checkbox[1].label = L"-Werror";
-    flag_checkbox[2].label = L"-lpthread";
-    flag_checkbox[3].label = L"-O3";
-    for (auto& c : flag_checkbox)
-      flag.Add(&c);
-
-    container.Add(&subcontainer);
-    // Executable
-    // ----------------------------------------------------------------
-    executable.placeholder = L"executable";
-    subcontainer.Add(&executable);
-
-    // Input    ----------------------------------------------------------------
-    subcontainer.Add(&input_container);
-
-    input_add.placeholder = L"input files";
-    input_add.on_enter = [this] {
-      input.entries.push_back(input_add.content);
-      input_add.content = L"";
-    };
-    input_container.Add(&input_add);
-    input_container.Add(&input);
   }
 
   Element Render() override {
-    auto compiler_win = window(text(L"Compiler"), compiler.Render() | frame);
-    auto flags_win = window(text(L"Flags"), flag.Render());
-    auto executable_win = window(text(L"Executable:"), executable.Render());
+    auto compiler_win = window(text(L"Compiler"), compiler->Render() | frame);
+    auto flags_win = window(text(L"Flags"), flags->Render());
+    auto executable_win = window(text(L"Executable:"), executable_->Render());
     auto input_win =
         window(text(L"Input"),
                hbox({
                    vbox({
                        hbox({
                            text(L"Add: "),
-                           input_add.Render(),
+                           input_add->Render(),
                        }) | size(WIDTH, EQUAL, 20) |
                            size(HEIGHT, EQUAL, 1),
                        filler(),
                    }),
                    separator(),
-                   input.Render() | frame | size(HEIGHT, EQUAL, 3) | flex,
+                   input->Render() | frame | size(HEIGHT, EQUAL, 3) | flex,
                }));
     return vbox({
                hbox({
@@ -225,28 +235,29 @@ class CompilerComponent : public Component {
   Elements RenderCommandLine() {
     Elements line;
     // Compiler
-    line.push_back(text(compiler.entries[compiler.selected]) | bold);
+    line.push_back(text(compiler_entries[compiler_selected]) | bold);
     // flags
-    for (auto& it : flag_checkbox) {
-      if (it.state) {
+    for (int i = 0; i < 4; ++i) {
+      if (options_state[i]) {
         line.push_back(text(L" "));
-        line.push_back(text(it.label) | dim);
+        line.push_back(text(options_label[i]) | dim);
       }
     }
     // Executable
-    if (!executable.content.empty()) {
+    if (!executable_content_.empty()) {
       line.push_back(text(L" -O ") | bold);
-      line.push_back(text(executable.content) | color(Color::BlueLight) | bold);
+      line.push_back(text(executable_content_) | color(Color::BlueLight) |
+                     bold);
     }
     // Input
-    for (auto& it : input.entries) {
+    for (auto& it : input_entries) {
       line.push_back(text(L" " + it) | color(Color::RedLight));
     }
     return line;
   }
 };
 
-class SpinnerComponent : public Component {
+class SpinnerComponent : public ComponentBase {
   Element Render() override {
     Elements entries;
     for (int i = 0; i < 22; ++i) {
@@ -258,7 +269,7 @@ class SpinnerComponent : public Component {
   }
 };
 
-class ColorComponent : public Component {
+class ColorComponent : public ComponentBase {
   Element Render() override {
     return hbox({
                vbox({
@@ -304,7 +315,7 @@ class ColorComponent : public Component {
   }
 };
 
-class GaugeComponent : public Component {
+class GaugeComponent : public ComponentBase {
   Element RenderGauge(int delta) {
     float progress = (shift + delta) % 1000 / 1000.f;
     return hbox({
@@ -337,38 +348,35 @@ class GaugeComponent : public Component {
   };
 };
 
-class Tab : public Component {
+class Tab : public ComponentBase {
  public:
-  Container main_container = Container::Vertical();
+  int tab_index = 0;
+  std::vector<std::wstring> tab_entries = {
+      L"htop", L"color", L"spinner", L"gauge", L"compiler",
+  };
+  Component tab_selection = Toggle(&tab_entries, &tab_index);
+  Component container =
+      Container::Tab(&tab_index,
+                     {
+                         std::make_shared<HTopComponent>(),
+                         std::make_shared<ColorComponent>(),
+                         std::make_shared<SpinnerComponent>(),
+                         std::make_shared<GaugeComponent>(),
+                         std::make_shared<CompilerComponent>(),
+                     });
 
-  Toggle tab_selection;
-  Container container = Container::Tab(&tab_selection.selected);
+  Component main_container = Container::Vertical({
+      tab_selection,
+      container,
+  });
 
-  HTopComponent htop_component;
-  ColorComponent color_component;
-  SpinnerComponent spinner_component;
-  GaugeComponent gauge_component;
-  CompilerComponent compiler_component;
-
-  Tab() {
-    Add(&main_container);
-    main_container.Add(&tab_selection);
-    tab_selection.entries = {
-        L"htop", L"color", L"spinner", L"gauge", L"compiler",
-    };
-    main_container.Add(&container);
-    container.Add(&htop_component);
-    container.Add(&color_component);
-    container.Add(&spinner_component);
-    container.Add(&gauge_component);
-    container.Add(&compiler_component);
-  }
+  Tab() { Add(main_container); }
 
   Element Render() override {
     return vbox({
         text(L"FTXUI Demo") | bold | hcenter,
-        tab_selection.Render() | hcenter,
-        container.Render() | flex,
+        tab_selection->Render() | hcenter,
+        container->Render() | flex,
     });
   }
 };
@@ -385,8 +393,8 @@ int main(int argc, const char* argv[]) {
     }
   });
 
-  Tab tab;
-  screen.Loop(&tab);
+  Component tab = std::make_shared<Tab>();
+  screen.Loop(tab);
 
   return 0;
 }
diff --git a/examples/component/input.cpp b/examples/component/input.cpp
index 3fc69e18..f9ab866d 100644
--- a/examples/component/input.cpp
+++ b/examples/component/input.cpp
@@ -1,44 +1,45 @@
-#include "ftxui/component/input.hpp"
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include <memory>  // for allocator, __shared_ptr_access
+#include <string>  // for operator+, wstring, char_traits
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Input, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, hbox, separator, border, vbox, Element
 
 using namespace ftxui;
 
-class MyComponent : public Component {
- public:
-  MyComponent() {
-    Add(&container);
-    container.Add(&input_1);
-    container.Add(&input_2);
-    container.Add(&input_3);
-
-    input_1.placeholder = L"input1";
-    input_2.placeholder = L"input2";
-    input_3.placeholder = L"input3";
-  }
-
-  std::function<void()> on_enter = []() {};
-
+class MyComponent : public ComponentBase {
  private:
-  Container container = Container::Vertical();
-  Input input_1;
-  Input input_2;
-  Input input_3;
+  std::wstring first_name_;
+  std::wstring last_name_;
+  std::wstring first_name_placeholder_ = L"first_name";
+  std::wstring last_name_placeholder_ = L"last_name";
+  Component input_first_name_ = Input(&first_name_, &first_name_placeholder_);
+  Component input_last_name_ = Input(&last_name_, &last_name_placeholder_);
 
   Element Render() override {
     return border(vbox({
-        hbox({text(L" input_1 : "), input_1.Render()}),
-        hbox({text(L" input_2 : "), input_2.Render()}),
-        hbox({text(L" input_3 : "), input_3.Render()}),
+        text(L"Hello " + first_name_ + L" " + last_name_),
+        separator(),
+        hbox({text(L" First name  : "), input_first_name_->Render()}),
+        hbox({text(L" Last name   : "), input_last_name_->Render()}),
+    }));
+  }
+
+ public:
+  MyComponent() {
+    Add(Container::Vertical({
+        input_first_name_,
+        input_last_name_,
     }));
   }
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>());
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/menu.cpp b/examples/component/menu.cpp
index 41860fe4..f68e2659 100644
--- a/examples/component/menu.cpp
+++ b/examples/component/menu.cpp
@@ -1,24 +1,30 @@
 #include <functional>  // for function
-#include <iostream>    // for basic_ostream::ope...
-#include <string>      // for wstring, allocator
-#include <vector>      // for vector
+#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
+#include <string>    // for wstring, allocator, basic_string
+#include <vector>    // for vector
 
-#include "ftxui/component/menu.hpp"                // for Menu
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Menu
+#include "ftxui/component/menu.hpp"                // for MenuBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/screen/box.hpp"                    // for ftxui
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
   auto screen = ScreenInteractive::TerminalOutput();
 
-  Menu menu;
-  menu.entries = {L"entry 1", L"entry 2", L"entry 3"};
-  menu.selected = 0;
-  menu.on_enter = screen.ExitLoopClosure();
+  std::vector<std::wstring> entries = {
+      L"entry 1",
+      L"entry 2",
+      L"entry 3",
+  };
+  int selected = 0;
 
-  screen.Loop(&menu);
+  auto menu = Menu(&entries, &selected);
+  MenuBase::From(menu)->on_enter = screen.ExitLoopClosure();
 
-  std::cout << "Selected element = " << menu.selected << std::endl;
+  screen.Loop(menu);
+
+  std::cout << "Selected element = " << selected << std::endl;
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/menu2.cpp b/examples/component/menu2.cpp
index 91aacf8e..292d663d 100644
--- a/examples/component/menu2.cpp
+++ b/examples/component/menu2.cpp
@@ -1,84 +1,88 @@
 #include <functional>  // for function
-#include <string>      // for wstring, allocator
-#include <vector>      // for vector
+#include <memory>      // for __shared_ptr_access, shared_ptr
+#include <string>  // for wstring, allocator, operator+, to_string, basic_string
+#include <vector>  // for vector
 
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/menu.hpp"                // for Menu
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"                  // for text, separator, bold
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/string.hpp"                 // for to_wstring
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Menu, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/menu.hpp"            // for MenuBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, separator, bold, hcenter, vbox, hbox, gauge, Element, operator|, border
+#include "ftxui/screen/string.hpp"  // for to_wstring
 
 using namespace ftxui;
 
-class MyComponent : public Component {
- public:
-  MyComponent() {
-    Add(&container);
-    container.Add(&left_menu);
-    container.Add(&right_menu);
-
-    left_menu.entries = {
-        L"0%",  L"10%", L"20%", L"30%", L"40%",
-        L"50%", L"60%", L"70%", L"80%", L"90%",
-    };
-    right_menu.entries = {
-        L"0%", L"1%", L"2%", L"3%", L"4%",  L"5%",
-        L"6%", L"7%", L"8%", L"9%", L"10%",
-    };
-
-    left_menu.on_enter = [this]() { on_enter(); };
-    right_menu.on_enter = [this]() { on_enter(); };
-  }
-
-  std::function<void()> on_enter = []() {};
-
+class MyComponent : public ComponentBase {
  private:
-  Container container = Container::Horizontal();
-  Menu left_menu;
-  Menu right_menu;
+  std::vector<std::wstring> left_menu_entries = {
+      L"0%",  L"10%", L"20%", L"30%", L"40%",
+      L"50%", L"60%", L"70%", L"80%", L"90%",
+  };
+  std::vector<std::wstring> right_menu_entries = {
+      L"0%", L"1%", L"2%", L"3%", L"4%",  L"5%",
+      L"6%", L"7%", L"8%", L"9%", L"10%",
+  };
+  int left_menu_selected = 0;
+  int right_menu_selected = 0;
+  Component left_menu_ = Menu(&left_menu_entries, &left_menu_selected);
+  Component right_menu_ = Menu(&right_menu_entries, &right_menu_selected);
+  Component container = Container::Horizontal({
+      left_menu_,
+      right_menu_,
+  });
 
   Element Render() override {
-    int sum = left_menu.selected * 10 + right_menu.selected;
-    return border(vbox({
-        // -------- Top panel --------------
-        hbox({
-            // -------- Left Menu --------------
-            vbox({
-                hcenter(bold(text(L"Percentage by 10%"))),
-                separator(),
-                left_menu.Render(),
-            }) | flex,
-            // -------- Right Menu --------------
-            vbox({
-                hcenter(bold(text(L"Percentage by 1%"))),
-                separator(),
-                right_menu.Render(),
-            }) | flex,
-            filler(),
-        }),
-        separator(),
-        // -------- Bottom panel --------------
-        vbox({
-            hbox({
-                text(L" gauge : "),
-                gauge(sum / 100.0),
-            }),
-            hbox({
-                text(L"  text : "),
-                text(to_wstring(std::to_string(sum) + " %")),
-            }),
-        }) | flex,
-    }));
+    int sum = left_menu_selected * 10 + right_menu_selected;
+    return vbox({
+               // -------- Top panel --------------
+               hbox({
+                   // -------- Left Menu --------------
+                   vbox({
+                       hcenter(bold(text(L"Percentage by 10%"))),
+                       separator(),
+                       left_menu_->Render(),
+                   }),
+                   separator(),
+                   // -------- Right Menu --------------
+                   vbox({
+                       hcenter(bold(text(L"Percentage by 1%"))),
+                       separator(),
+                       right_menu_->Render(),
+                   }),
+                   separator(),
+               }),
+               separator(),
+               // -------- Bottom panel --------------
+               vbox({
+                   hbox({
+                       text(L" gauge : "),
+                       gauge(sum / 100.0),
+                   }),
+                   hbox({
+                       text(L"  text : "),
+                       text(to_wstring(std::to_string(sum) + " %")),
+                   }),
+               }),
+           }) |
+           border;
   }
+
+ public:
+  MyComponent() {
+    Add(container);
+    MenuBase::From(left_menu_)->on_enter = [this]() { on_enter(); };
+    MenuBase::From(right_menu_)->on_enter = [this]() { on_enter(); };
+  }
+  std::function<void()> on_enter = []() {};
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  auto component = Make<MyComponent>();
+  component->on_enter = screen.ExitLoopClosure();
+  screen.Loop(component);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/menu_style.cpp b/examples/component/menu_style.cpp
index 3fc8879c..79f8ce10 100644
--- a/examples/component/menu_style.cpp
+++ b/examples/component/menu_style.cpp
@@ -1,92 +1,100 @@
 #include <functional>        // for function
 #include <initializer_list>  // for initializer_list
-#include <string>            // for wstring, allocator
+#include <memory>            // for __shared_ptr_access
+#include <string>            // for wstring, allocator, basic_string
 #include <vector>            // for vector
 
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/menu.hpp"                // for Menu
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"                  // for operator|, Element
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/color.hpp"                  // for Color, Color::Blue
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Menu, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/menu.hpp"            // for MenuBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, separator, bgcolor, color, flex, Decorator, bold, hbox, border, dim
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::BlueLight, Color::Red, Color::Yellow
 
 using namespace ftxui;
 
-class MyComponent : public Component {
+std::vector<std::wstring> entries = {
+    L"Monkey", L"Dog", L"Cat", L"Bird", L"Elephant",
+};
+
+class MyComponent : public ComponentBase {
  public:
-  MyComponent() {
-    Add(&container);
+  MyComponent(std::function<void(void)> exit) {
+    on_enter_ = exit;
 
-    for (Menu* menu : {
-             &menu_1,
-             &menu_2,
-             &menu_3,
-             &menu_4,
-             &menu_5,
-             &menu_6,
-         }) {
-      container.Add(menu);
-      menu->entries = {
-          L"Monkey", L"Dog", L"Cat", L"Bird", L"Elephant",
-      };
-      menu->on_enter = [this]() { on_enter(); };
-    }
+    Add(container);
 
-    menu_2.focused_style = bold | color(Color::Blue);
-    menu_2.selected_style = color(Color::Blue);
-    menu_2.selected_focused_style = bold | color(Color::Blue);
+    for (Component menu :
+         {menu_1_, menu_2_, menu_3_, menu_4_, menu_5_, menu_6_})
+      MenuBase::From(menu)->on_enter = [this] { on_enter_(); };
 
-    menu_3.selected_style = color(Color::Blue);
-    menu_3.focused_style = bgcolor(Color::Blue);
-    menu_3.selected_focused_style = bgcolor(Color::Blue);
+    MenuBase::From(menu_2_)->focused_style = bold | color(Color::Blue);
+    MenuBase::From(menu_2_)->selected_style = color(Color::Blue);
+    MenuBase::From(menu_2_)->selected_focused_style = bold | color(Color::Blue);
 
-    menu_4.selected_style = bgcolor(Color::Blue);
-    menu_4.focused_style = bgcolor(Color::BlueLight);
-    menu_4.selected_focused_style = bgcolor(Color::BlueLight);
+    MenuBase::From(menu_3_)->selected_style = color(Color::Blue);
+    MenuBase::From(menu_3_)->focused_style = bgcolor(Color::Blue);
+    MenuBase::From(menu_3_)->selected_focused_style = bgcolor(Color::Blue);
 
-    menu_5.normal_style = bgcolor(Color::Blue);
-    menu_5.selected_style = bgcolor(Color::Yellow);
-    menu_5.focused_style = bgcolor(Color::Red);
-    menu_5.selected_focused_style = bgcolor(Color::Red);
+    MenuBase::From(menu_4_)->selected_style = bgcolor(Color::Blue);
+    MenuBase::From(menu_4_)->focused_style = bgcolor(Color::BlueLight);
+    MenuBase::From(menu_4_)->selected_focused_style = bgcolor(Color::BlueLight);
 
-    menu_6.normal_style = dim | color(Color::Blue);
-    menu_6.selected_style = color(Color::Blue);
-    menu_6.focused_style = bold | color(Color::Blue);
-    menu_6.selected_focused_style = bold | color(Color::Blue);
+    MenuBase::From(menu_5_)->normal_style = bgcolor(Color::Blue);
+    MenuBase::From(menu_5_)->selected_style = bgcolor(Color::Yellow);
+    MenuBase::From(menu_5_)->focused_style = bgcolor(Color::Red);
+    MenuBase::From(menu_5_)->selected_focused_style = bgcolor(Color::Red);
+
+    MenuBase::From(menu_6_)->normal_style = dim | color(Color::Blue);
+    MenuBase::From(menu_6_)->selected_style = color(Color::Blue);
+    MenuBase::From(menu_6_)->focused_style = bold | color(Color::Blue);
+    MenuBase::From(menu_6_)->selected_focused_style = bold | color(Color::Blue);
   }
 
-  std::function<void()> on_enter = []() {};
+  std::function<void()> on_enter_;
 
  private:
-  Container container = Container::Horizontal();
-  Menu menu_1;
-  Menu menu_2;
-  Menu menu_3;
-  Menu menu_4;
-  Menu menu_5;
-  Menu menu_6;
+  int menu_1_selected_ = 0;
+  int menu_2_selected_ = 0;
+  int menu_3_selected_ = 0;
+  int menu_4_selected_ = 0;
+  int menu_5_selected_ = 0;
+  int menu_6_selected_ = 0;
+  Component menu_1_ = Menu(&entries, &menu_1_selected_);
+  Component menu_2_ = Menu(&entries, &menu_2_selected_);
+  Component menu_3_ = Menu(&entries, &menu_3_selected_);
+  Component menu_4_ = Menu(&entries, &menu_4_selected_);
+  Component menu_5_ = Menu(&entries, &menu_5_selected_);
+  Component menu_6_ = Menu(&entries, &menu_6_selected_);
+  Component container = Container::Horizontal({
+      menu_1_,
+      menu_2_,
+      menu_3_,
+      menu_4_,
+      menu_5_,
+      menu_6_,
+  });
 
   // clang-format off
-   Element Render() override {
-     return
-        hbox({
-          menu_1.Render() | flex, separator(),
-          menu_2.Render() | flex, separator(),
-          menu_3.Render() | flex, separator(),
-          menu_4.Render() | flex, separator(),
-          menu_5.Render() | flex, separator(),
-          menu_6.Render() | flex,
-        }) | border;
-   }
+  Element Render() override {
+   return
+      hbox({
+        menu_1_->Render() | flex, separator(),
+        menu_2_->Render() | flex, separator(),
+        menu_3_->Render() | flex, separator(),
+        menu_4_->Render() | flex, separator(),
+        menu_5_->Render() | flex, separator(),
+        menu_6_->Render() | flex,
+      }) | border;
+  }
   // clang-format on
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/modal_dialog.cpp b/examples/component/modal_dialog.cpp
index d325e491..1528d3c2 100644
--- a/examples/component/modal_dialog.cpp
+++ b/examples/component/modal_dialog.cpp
@@ -1,132 +1,130 @@
 #include <functional>  // for function
-#include <memory>      // for allocator_traits<>...
-#include <string>      // for operator+, wstring
-#include <vector>      // for vector
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr, make_shared
+#include <string>  // for wstring, operator+, basic_string, char_traits
+#include <vector>  // for vector
 
-#include "ftxui/component/button.hpp"              // for Button
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"                  // for Element, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Button, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, operator|, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
 
 using namespace ftxui;
 
 // The main screen, at depth 0. It display the main content.
-class Content : public Component {
+class Content : public ComponentBase {
+ private:
+  std::wstring label_rate_ftxui_ = L"Rate FTXUI";
+  std::wstring label_quit_ = L"Quit";
+  bool modal_open_ = false;
+
+  Component button_rate_ftxui_ =
+      Button(&label_rate_ftxui_, [this] { on_rate_ftxui(); });
+  Component button_quit_ = Button(&label_quit_, [this] { on_quit(); });
+  Component container_ = Container::Horizontal({
+      button_rate_ftxui_,
+      button_quit_,
+  });
+
  public:
-  std::function<void()> on_rate_ftxui = [] {};
-  std::function<void()> on_quit = [] {};
-  std::wstring rating_ = L"3/5 stars";
-  Content() {
-    Add(&container_);
-    container_.Add(&button_rate_ftxui);
-    container_.Add(&button_quit_);
-    button_rate_ftxui.on_click = [&] { on_rate_ftxui(); };
-    button_quit_.on_click = [&] { on_quit(); };
-  }
+  std::wstring rating = L"3/5 stars";
+  std::function<void()> on_rate_ftxui;
+  std::function<void()> on_quit;
+
+  Content() { Add(container_); }
 
   Element Render() final {
-    auto button_elements = hbox({
-        button_rate_ftxui.Render(),
-        filler(),
-        button_quit_.Render(),
-    });
-
     auto document =  //
         vbox({
             text(L"Modal dialog example"),
             separator(),
-            text(L"☆☆☆ FTXUI:" + rating_ + L" ☆☆☆") | bold,
+            text(L"☆☆☆ FTXUI:" + rating + L" ☆☆☆") | bold,
             filler(),
-            button_elements,
+            hbox({
+                button_rate_ftxui_->Render(),
+                filler(),
+                button_quit_->Render(),
+            }),
         }) |
         border;
 
     return document | size(HEIGHT, GREATER_THAN, 18) | center;
   }
+};
 
- private:
-  Container container_ = Container::Horizontal();
-  Button button_rate_ftxui = Button(L"Rate FTXUI");
-  Button button_quit_ = Button(L"Quit");
+std::vector<std::wstring> rating_labels = {
+    L"1/5 stars", L"2/5 stars", L"3/5 stars", L"4/5 stars", L"5/5 stars",
 };
 
 // The "modal" screen, at depth 1. It display the modal dialog.
-class Modal : public Component {
+class Modal : public ComponentBase {
+ private:
+  Component container_ = Container::Horizontal({
+      Button(&rating_labels[0], [this] { on_click(rating_labels[0]); }),
+      Button(&rating_labels[1], [this] { on_click(rating_labels[1]); }),
+      Button(&rating_labels[2], [this] { on_click(rating_labels[2]); }),
+      Button(&rating_labels[3], [this] { on_click(rating_labels[3]); }),
+      Button(&rating_labels[4], [this] { on_click(rating_labels[4]); }),
+  });
+
  public:
   std::function<void(std::wstring)> on_click;
 
-  Modal() {
-    Add(&container_);
-    buttons_.resize(5);
-    for (int i = 0; i < 5; ++i) {
-      std::wstring stars = std::to_wstring(i + 1) + L"/5 stars";
-      buttons_[i] = Button(stars);
-      buttons_[i].on_click = [&, stars] { on_click(stars); };
-      container_.Add(&buttons_[i]);
-    }
-  }
+  Modal() { Add(container_); }
 
   Element Render() final {
     return vbox({
                text(L"Do you like FTXUI?"),
                separator(),
-               hbox({
-                   buttons_[0].Render(),
-                   buttons_[1].Render(),
-                   buttons_[2].Render(),
-                   buttons_[3].Render(),
-                   buttons_[4].Render(),
-               }),
+               hbox(container_->Render()),
            }) |
            border;
   }
-
- private:
-  Container container_ = Container::Horizontal();
-  std::vector<Button> buttons_;
 };
 
-class MyComponent : public Component {
+class MyComponent : public ComponentBase {
+ private:
+  std::shared_ptr<Content> content_ = std::make_shared<Content>();
+  std::shared_ptr<Modal> modal_ = std::make_shared<Modal>();
+
+  int depth = 0;
+  Component container_ = Container::Tab(&depth,
+                                        {
+                                            content_,
+                                            modal_,
+                                        });
+
+  std::function<void()> on_quit_;
+
  public:
-  std::function<void()> on_quit = [] {};
+  MyComponent(std::function<void()> on_quit) : on_quit_(on_quit) {
+    Add(container_);
 
-  MyComponent() {
-    Add(&container_);
-    container_.Add(&content_);
-    container_.Add(&modal_);
-
-    content_.on_quit = [&] { on_quit(); };
-    content_.on_rate_ftxui = [&] { modal_.TakeFocus(); };
-    modal_.on_click = [&](std::wstring rating) {
-      content_.rating_ = rating;
-      content_.TakeFocus();
+    content_->on_quit = [&] { on_quit(); };
+    content_->on_rate_ftxui = [this] { depth = 1; };
+    modal_->on_click = [&](std::wstring rating) {
+      content_->rating = rating;
+      depth = 0;
     };
   }
 
   Element Render() final {
-    Element document = content_.Render();
-    if (modal_.Focused()) {
+    Element document = content_->Render();
+
+    if (depth == 1) {
       document = dbox({
           document,
-          modal_.Render() | clear_under | center,
+          modal_->Render() | clear_under | center,
       });
     }
     return document;
   }
-
- private:
-  Container container_ = Container::Tab(nullptr);
-  Content content_;
-  Modal modal_;
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent my_component;
-  my_component.on_quit = screen.ExitLoopClosure();
-  screen.Loop(&my_component);
+  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
   return 0;
 }
 
diff --git a/examples/component/radiobox.cpp b/examples/component/radiobox.cpp
index 0a3a6507..07cbb676 100644
--- a/examples/component/radiobox.cpp
+++ b/examples/component/radiobox.cpp
@@ -1,18 +1,23 @@
-#include "ftxui/component/radiobox.hpp"
+#include <string>  // for wstring, allocator, basic_string
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Radiobox
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 
 using namespace ftxui;
 
 int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::TerminalOutput();
-  RadioBox radiobox;
-  radiobox.entries = {
+  std::vector<std::wstring> radiobox_list = {
       L"Use gcc",
       L"Use clang",
       L"Use emscripten",
       L"Use tcc",
   };
-  screen.Loop(&radiobox);
+  int selected = 0;
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(Radiobox(&radiobox_list, &selected));
   return 0;
 }
 
diff --git a/examples/component/radiobox_in_frame.cpp b/examples/component/radiobox_in_frame.cpp
index 09c86445..31b36ad5 100644
--- a/examples/component/radiobox_in_frame.cpp
+++ b/examples/component/radiobox_in_frame.cpp
@@ -1,35 +1,36 @@
 #include <string>  // for wstring, operator+
 #include <vector>  // for vector
 
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/radiobox.hpp"            // for RadioBox
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Make, Radiobox
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"                  // for Element, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/string.hpp"                 // for to_wstring
+#include "ftxui/dom/elements.hpp"  // for Element, operator|, size, border, frame, HEIGHT, LESS_THAN
+#include "ftxui/screen/string.hpp"  // for to_wstring
 
 using namespace ftxui;
 
-class MyComponent : public Component {
-  RadioBox radiobox;
+class MyComponent : public ComponentBase {
+ private:
+  std::vector<std::wstring> entries_;
+  int selected_ = 0;
 
  public:
   MyComponent() {
-    for (int i = 0; i < 30; ++i) {
-      radiobox.entries.push_back(L"RadioBox " + to_wstring(i));
-    }
-    Add(&radiobox);
+    for (int i = 0; i < 30; ++i)
+      entries_.push_back(L"RadioBox " + to_wstring(i));
+    Add(Radiobox(&entries_, &selected_));
   }
 
   Element Render() override {
-    return radiobox.Render() | frame | size(HEIGHT, LESS_THAN, 10) | border;
+    return ComponentBase::Render() | frame | size(HEIGHT, LESS_THAN, 10) |
+           border;
   }
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
-  MyComponent component;
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>());
 
   return 0;
 }
diff --git a/examples/component/slider.cpp b/examples/component/slider.cpp
index 9e7b6f13..7a3f51ed 100644
--- a/examples/component/slider.cpp
+++ b/examples/component/slider.cpp
@@ -1,82 +1,16 @@
-#include <functional>  // for function
-#include <memory>      // for allocator, unique_ptr
-#include <string>      // for operator+, to_wstring
+#include <memory>  // for allocator
 
-#include "ftxui/component/component.hpp"           // for Component, Compone...
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/event.hpp"               // for Event, Event::Escape
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Slider
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/component/slider.hpp"              // for Slider
-#include "ftxui/dom/elements.hpp"                  // for separator, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
-#include "ftxui/screen/color.hpp"                  // for Color
 
 using namespace ftxui;
 
-Element ColorTile(int red, int green, int blue) {
-  return text(L"") | size(WIDTH, GREATER_THAN, 14) |
-         size(HEIGHT, GREATER_THAN, 7) | bgcolor(Color::RGB(red, green, blue));
-}
-
-Element ColorString(int red, int green, int blue) {
-  return text(L"RGB = (" +                     //
-              std::to_wstring(red) + L"," +    //
-              std::to_wstring(green) + L"," +  //
-              std::to_wstring(blue) + L")"     //
-  );
-}
-
-class MyComponent : public Component {
- public:
-  MyComponent(int* red, int* green, int* blue, std::function<void(void)> quit)
-      : red_(red), green_(green), blue_(blue), quit_(quit) {
-    Add(&container_);
-    container_.Add(slider_red_.get());
-    container_.Add(slider_green_.get());
-    container_.Add(slider_blue_.get());
-  }
-
-  Element Render() {
-    return hbox({
-               ColorTile(*red_, *green_, *blue_),
-               separator(),
-               vbox({
-                   slider_red_->Render(),
-                   separator(),
-                   slider_green_->Render(),
-                   separator(),
-                   slider_blue_->Render(),
-                   separator(),
-                   ColorString(*red_, *green_, *blue_),
-               }) | xflex,
-           }) |
-           border | size(WIDTH, LESS_THAN, 80);
-  }
-
-  bool OnEvent(Event event) {
-    if (event == Event::Return || event == Event::Escape)
-      quit_();
-    return Component::OnEvent(event);
-  }
-
- private:
-  int* red_;
-  int* green_;
-  int* blue_;
-  Container container_ = Container::Vertical();
-  ComponentPtr slider_red_ = Slider(L"Red  :", red_, 0, 255, 1);
-  ComponentPtr slider_green_ = Slider(L"Green:", green_, 0, 255, 1);
-  ComponentPtr slider_blue_ = Slider(L"Blue :", blue_, 0, 255, 1);
-  std::function<void(void)> quit_;
-};
-
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  int red = 128;
-  int green = 25;
-  int blue = 100;
-  auto component = MyComponent(&red, &green, &blue, screen.ExitLoopClosure());
-  screen.Loop(&component);
+  int value = 50;
+  auto slider = Slider(L"Value:", &value, 0, 100, 1);
+  screen.Loop(slider);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/tab_horizontal.cpp b/examples/component/tab_horizontal.cpp
index 8d4b8225..4897e7b9 100644
--- a/examples/component/tab_horizontal.cpp
+++ b/examples/component/tab_horizontal.cpp
@@ -1,71 +1,77 @@
-#include <functional>  // for function
-#include <string>      // for wstring, allocator
-#include <vector>      // for vector
+#include <memory>  // for __shared_ptr_access
+#include <string>  // for wstring, allocator, basic_string
+#include <vector>  // for vector
 
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/radiobox.hpp"            // for RadioBox
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/component/toggle.hpp"              // for Toggle
-#include "ftxui/dom/elements.hpp"                  // for Element, operator|
-#include "ftxui/screen/box.hpp"                    // for ftxui
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Radiobox, Make, Toggle
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, separator, operator|, vbox, border
 
 using namespace ftxui;
 
-class MyComponent : public Component {
+class MyComponent : public ComponentBase {
+ private:
+  std::vector<std::wstring> tab_values_ = {
+      L"tab_1",
+      L"tab_2",
+      L"tab_3",
+  };
+  int tab_selected_ = 0;
+  Component tab_toggle_ = Toggle(&tab_values_, &tab_selected_);
+
+  std::vector<std::wstring> tab_1_entries_ = {
+      L"Forest",
+      L"Water",
+      L"I don't know",
+  };
+  int tab_1_selected_ = 0;
+
+  std::vector<std::wstring> tab_2_entries_ = {
+      L"Hello",
+      L"Hi",
+      L"Hay",
+  };
+  int tab_2_selected_ = 0;
+
+  std::vector<std::wstring> tab_3_entries_ = {
+      L"Table",
+      L"Nothing",
+      L"Is",
+      L"Empty",
+  };
+  int tab_3_selected_ = 0;
+
+  Component tab_container_ =
+      Container::Tab(&tab_selected_,
+                     {
+                         Radiobox(&tab_1_entries_, &tab_1_selected_),
+                         Radiobox(&tab_2_entries_, &tab_2_selected_),
+                         Radiobox(&tab_3_entries_, &tab_3_selected_),
+                     });
+
+  Component container_ = Container::Vertical({
+      tab_toggle_,
+      tab_container_,
+  });
+
  public:
-  MyComponent() {
-    Add(&container_);
-    container_.Add(&toggle_);
-
-    toggle_.entries = {
-        L"tab_1",
-        L"tab_2",
-        L"tab_3",
-    };
-
-    container_.Add(&tab_container_);
-
-    radiobox_1_.entries = {L"Forest", L"Water", L"I don't know"};
-    tab_container_.Add(&radiobox_1_);
-
-    radiobox_2_.entries = {
-        L"Hello",
-        L"Hi",
-        L"Hay",
-    };
-    tab_container_.Add(&radiobox_2_);
-
-    radiobox_3_.entries = {
-        L"Table",
-        L"Nothing",
-        L"Is",
-        L"Empty",
-    };
-    tab_container_.Add(&radiobox_3_);
-  }
-
-  std::function<void()> on_enter = []() {};
+  MyComponent() { Add(container_); }
 
   Element Render() {
-    return vbox(toggle_.Render(), separator(), tab_container_.Render()) |
+    return vbox({
+               tab_toggle_->Render(),
+               separator(),
+               tab_container_->Render(),
+           }) |
            border;
   }
-
- private:
-  Toggle toggle_;
-  Container container_ = Container::Vertical();
-  Container tab_container_ = Container::Tab(&(toggle_.selected));
-  RadioBox radiobox_1_;
-  RadioBox radiobox_2_;
-  RadioBox radiobox_3_;
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>());
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/tab_vertical.cpp b/examples/component/tab_vertical.cpp
index 398be13d..b49127ca 100644
--- a/examples/component/tab_vertical.cpp
+++ b/examples/component/tab_vertical.cpp
@@ -1,64 +1,77 @@
-#include <functional>  // for function
-#include <string>      // for wstring, allocator
-#include <vector>      // for vector
+#include <memory>  // for __shared_ptr_access
+#include <string>  // for wstring, allocator, basic_string
+#include <vector>  // for vector
 
-#include "ftxui/component/component.hpp"           // for Component
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/menu.hpp"                // for Menu
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/screen/box.hpp"                    // for ftxui
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Radiobox, Make, Menu
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, separator, hbox, operator|, border
 
 using namespace ftxui;
 
-class MyComponent : public Component {
- public:
-  MyComponent() {
-    Add(&container_);
-    container_.Add(&menu_);
-
-    menu_.entries = {
-        L"menu_1",
-        L"menu_2",
-        L"menu_3",
-    };
-
-    container_.Add(&tab_container_);
-
-    menu_1_.entries = {L"Forest", L"Water", L"I don't know"};
-    tab_container_.Add(&menu_1_);
-
-    menu_2_.entries = {
-        L"Hello",
-        L"Hi",
-        L"Hay",
-    };
-    tab_container_.Add(&menu_2_);
-
-    menu_3_.entries = {
-        L"Table",
-        L"Nothing",
-        L"Is",
-        L"Empty",
-    };
-    tab_container_.Add(&menu_3_);
-  }
-
-  std::function<void()> on_enter = []() {};
-
+class MyComponent : public ComponentBase {
  private:
-  Menu menu_;
-  Container container_ = Container::Horizontal();
-  Container tab_container_ = Container::Tab(&(menu_.selected));
-  Menu menu_1_;
-  Menu menu_2_;
-  Menu menu_3_;
+  std::vector<std::wstring> tab_values_ = {
+      L"tab_1",
+      L"tab_2",
+      L"tab_3",
+  };
+  int tab_selected_ = 0;
+  Component tab_toggle_ = Menu(&tab_values_, &tab_selected_);
+
+  std::vector<std::wstring> tab_1_entries_ = {
+      L"Forest",
+      L"Water",
+      L"I don't know",
+  };
+  int tab_1_selected_ = 0;
+
+  std::vector<std::wstring> tab_2_entries_ = {
+      L"Hello",
+      L"Hi",
+      L"Hay",
+  };
+  int tab_2_selected_ = 0;
+
+  std::vector<std::wstring> tab_3_entries_ = {
+      L"Table",
+      L"Nothing",
+      L"Is",
+      L"Empty",
+  };
+  int tab_3_selected_ = 0;
+
+  Component tab_container_ =
+      Container::Tab(&tab_selected_,
+                     {
+                         Radiobox(&tab_1_entries_, &tab_1_selected_),
+                         Radiobox(&tab_2_entries_, &tab_2_selected_),
+                         Radiobox(&tab_3_entries_, &tab_3_selected_),
+                     });
+
+  Component container_ = Container::Horizontal({
+      tab_toggle_,
+      tab_container_,
+  });
+
+ public:
+  MyComponent() { Add(container_); }
+
+  Element Render() {
+    return hbox({
+               tab_toggle_->Render(),
+               separator(),
+               tab_container_->Render(),
+           }) |
+           border;
+  }
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>());
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/toggle.cpp b/examples/component/toggle.cpp
index 5ecf0920..cae234e4 100644
--- a/examples/component/toggle.cpp
+++ b/examples/component/toggle.cpp
@@ -1,59 +1,82 @@
-#include "ftxui/component/toggle.hpp"
-#include "ftxui/component/container.hpp"           // for Container
-#include "ftxui/component/event.hpp"               // for Event, Event::Return
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include <functional>  // for function
+#include <memory>      // for allocator, __shared_ptr_access
+#include <string>      // for wstring, basic_string
+#include <vector>      // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Toggle, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/event.hpp"           // for Event, Event::Return
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, hbox, vbox, Element
 
 using namespace ftxui;
 
-class MyComponent : public Component {
- public:
-  MyComponent() {
-    Add(&container_);
-    container_.Add(&toggle_1_);
-    container_.Add(&toggle_2_);
-    container_.Add(&toggle_3_);
-    container_.Add(&toggle_4_);
-
-    toggle_1_.entries = {L"On", L"Off"};
-    toggle_2_.entries = {L"Enabled", L"Disabled"};
-    toggle_3_.entries = {L"10€", L"0€"};
-    toggle_4_.entries = {L"Nothing", L"One element", L"Several elements"};
-  }
-
-  std::function<void()> on_enter = []() {};
-
+class MyComponent : public ComponentBase {
  private:
-  Container container_ = Container::Vertical();
-  Toggle toggle_1_;
-  Toggle toggle_2_;
-  Toggle toggle_3_;
-  Toggle toggle_4_;
+  std::vector<std::wstring> toggle_1_entries_ = {
+      L"On",
+      L"Off",
+  };
+  std::vector<std::wstring> toggle_2_entries_ = {
+      L"Enabled",
+      L"Disabled",
+  };
+  std::vector<std::wstring> toggle_3_entries_ = {
+      L"10€",
+      L"0€",
+  };
+  std::vector<std::wstring> toggle_4_entries_ = {
+      L"Nothing",
+      L"One element",
+      L"Several elements",
+  };
+
+  int toggle_1_selected_ = 0;
+  int toggle_2_selected_ = 0;
+  int toggle_3_selected_ = 0;
+  int toggle_4_selected_ = 0;
+  Component toggle_1_ = Toggle(&toggle_1_entries_, &toggle_1_selected_);
+  Component toggle_2_ = Toggle(&toggle_2_entries_, &toggle_2_selected_);
+  Component toggle_3_ = Toggle(&toggle_3_entries_, &toggle_3_selected_);
+  Component toggle_4_ = Toggle(&toggle_4_entries_, &toggle_4_selected_);
+
+  std::function<void()> exit_;
 
   Element Render() override {
     return vbox({
         text(L"Choose your options:"),
         text(L""),
-        hbox(text(L" * Poweroff on startup      : "), toggle_1_.Render()),
-        hbox(text(L" * Out of process           : "), toggle_2_.Render()),
-        hbox(text(L" * Price of the information : "), toggle_3_.Render()),
-        hbox(text(L" * Number of elements       : "), toggle_4_.Render()),
+        hbox(text(L" * Poweroff on startup      : "), toggle_1_->Render()),
+        hbox(text(L" * Out of process           : "), toggle_2_->Render()),
+        hbox(text(L" * Price of the information : "), toggle_3_->Render()),
+        hbox(text(L" * Number of elements       : "), toggle_4_->Render()),
     });
   }
 
   bool OnEvent(Event event) override {
     if (event == Event::Return) {
-      on_enter();
+      exit_();
       return true;
     }
-    return Component::OnEvent(event);
+    return ComponentBase::OnEvent(event);
+  }
+
+ public:
+  MyComponent(std::function<void()> exit) : exit_(exit) {
+    Add(Container::Vertical({
+        toggle_1_,
+        toggle_2_,
+        toggle_3_,
+        toggle_4_,
+    }));
   }
 };
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  MyComponent component;
-  component.on_enter = screen.ExitLoopClosure();
-  screen.Loop(&component);
+  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/index.html b/examples/index.html
index 4fd3e5c5..a4a427d9 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -33,15 +33,18 @@
       "./component/menu.js",
       "./component/menu2.js",
       "./component/menu_style.js",
+      "./component/modal_dialog.js",
       "./component/radiobox.js",
       "./component/radiobox_in_frame.js",
+      "./component/slider.js",
       "./component/tab_horizontal.js",
       "./component/tab_vertical.js",
       "./component/toggle.js",
-      "./component/modal_dialog.js",
-
       "./dom/border.js",
       "./dom/color_gallery.js",
+      "./dom/color_info_palette256.js",
+      "./dom/color_truecolor_HSV.js",
+      "./dom/color_truecolor_RGB.js",
       "./dom/dbox.js",
       "./dom/gauge.js",
       "./dom/graph.js",
@@ -55,16 +58,12 @@
       "./dom/style_blink.js",
       "./dom/style_bold.js",
       "./dom/style_color.js",
-      "./dom/color_truecolor_RGB.js",
-      "./dom/color_truecolor_HSV.js",
-      "./dom/color_info_palette256.js",
       "./dom/style_dim.js",
       "./dom/style_gallery.js",
       "./dom/style_inverted.js",
       "./dom/style_underlined.js",
       "./dom/vbox_hbox.js",
       "./dom/window.js",
-
       "./util/print_key_press.js",
     ];
 
diff --git a/examples/util/print_key_press.cpp b/examples/util/print_key_press.cpp
index 3f255b58..02a13b37 100644
--- a/examples/util/print_key_press.cpp
+++ b/examples/util/print_key_press.cpp
@@ -4,16 +4,17 @@
 
 #include <stddef.h>                                // for size_t
 #include <algorithm>                               // for max
-#include <ftxui/component/component.hpp>           // for Component
+#include <ftxui/component/component.hpp>           // for Make
 #include <ftxui/component/screen_interactive.hpp>  // for ScreenInteractive
-#include <string>                                  // for allocator, operator+
-#include <utility>                                 // for move
-#include <vector>                                  // for vector
+#include <string>  // for allocator, operator+, wstring, char_traits, to_wstring, string
+#include <utility>  // for move
+#include <vector>   // for vector
 
-#include "ftxui/component/event.hpp"  // for Event
-#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left
-#include "ftxui/dom/elements.hpp"     // for text, vbox, window
-#include "ftxui/screen/box.hpp"       // for ftxui
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/event.hpp"           // for Event
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Middle, Mouse::None, Mouse::Pressed, Mouse::Released, Mouse::Right, Mouse::WheelDown, Mouse::WheelUp
+#include "ftxui/dom/elements.hpp"  // for text, vbox, window, Elements, Element
 
 using namespace ftxui;
 
@@ -71,7 +72,7 @@ std::wstring Stringify(Event event) {
   return out;
 }
 
-class DrawKey : public Component {
+class DrawKey : public ComponentBase {
  public:
   ~DrawKey() override = default;
 
@@ -94,6 +95,5 @@ class DrawKey : public Component {
 
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  DrawKey draw_key;
-  screen.Loop(&draw_key);
+  screen.Loop(Make<DrawKey>());
 }
diff --git a/include/ftxui/component/button.hpp b/include/ftxui/component/button.hpp
index e7b190c9..073dbdcc 100644
--- a/include/ftxui/component/button.hpp
+++ b/include/ftxui/component/button.hpp
@@ -1,36 +1,35 @@
 #ifndef FTXUI_COMPONENT_BUTTON_HPP
 #define FTXUI_COMPONENT_BUTTON_HPP
 
-#include <functional>
-#include <string>
+#include <functional>  // for function
+#include <string>      // for wstring
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"              // for Element
+#include "ftxui/screen/box.hpp"                // for Box
 
 namespace ftxui {
 struct Event;
 
 /// @brief A button. An action is associated to the click event.
 /// @ingroup dom
-class Button : public Component {
+class ButtonBase : public ComponentBase {
  public:
+  // Access this interface from a Component
+  static ButtonBase* From(Component);
+
   // Constructor.
-  Button() = default;
-  Button(std::wstring label) : label(label) {}
-  ~Button() override = default;
-
-  /// The Button label.
-  std::wstring label = L"button";
-
-  /// Called when the user press the "enter" button.
-  std::function<void()> on_click = [] {};
+  ButtonBase(const std::wstring* label, std::function<void()> on_click);
+  ~ButtonBase() override = default;
 
   // Component implementation.
   Element Render() override;
   bool OnEvent(Event) override;
 
  private:
+  const std::wstring* label_;
+  std::function<void()> on_click_;
   Box box_;
 };
 
diff --git a/include/ftxui/component/checkbox.hpp b/include/ftxui/component/checkbox.hpp
index 214ce524..fd7959e7 100644
--- a/include/ftxui/component/checkbox.hpp
+++ b/include/ftxui/component/checkbox.hpp
@@ -1,10 +1,13 @@
 #ifndef FTXUI_COMPONENT_CHECKBOX_HPP
 #define FTXUI_COMPONENT_CHECKBOX_HPP
 
-#include <string>
+#include <functional>  // for function
+#include <string>      // for wstring, allocator
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"  // for Element, Decorator, inverted, nothing
+#include "ftxui/screen/box.hpp"    // for Box
 
 namespace ftxui {
 struct Event;
@@ -12,14 +15,14 @@ struct Event;
 /// @brief A Checkbox. It can be checked or unchecked.Display an element on a
 /// ftxui::Screen.
 /// @ingroup dom
-class CheckBox : public Component {
+class CheckboxBase : public ComponentBase {
  public:
-  // Constructor.
-  CheckBox() = default;
-  ~CheckBox() override = default;
+  // Access this interface from a Component
+  static CheckboxBase* From(Component component);
 
-  bool state = false;  // The current state. true=checked, false:unchecked.
-  std::wstring label = L"label";  // The CheckBox label.
+  // Constructor.
+  CheckboxBase(const std::wstring* label, bool* state);
+  ~CheckboxBase() override = default;
 
 #if defined(_WIN32)
   std::wstring checked = L"[X] ";    /// Prefix for  a "checked" state.
@@ -32,7 +35,7 @@ class CheckBox : public Component {
   Decorator focused_style = inverted;   /// Decorator used when focused.
   Decorator unfocused_style = nothing;  /// Decorator used when unfocused.
 
-  /// Called when the user change the state of the CheckBox.
+  /// Called when the user change the state of the CheckboxBase.
   std::function<void()> on_change = []() {};
 
   // Component implementation.
@@ -42,6 +45,8 @@ class CheckBox : public Component {
  private:
   bool OnMouseEvent(Event event);
 
+  const std::wstring* const label_;
+  bool* const state_;
   int cursor_position = 0;
   Box box_;
 };
diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp
index 9003f1c1..882e10bf 100644
--- a/include/ftxui/component/component.hpp
+++ b/include/ftxui/component/component.hpp
@@ -1,77 +1,45 @@
-#ifndef FTXUI_COMPONENT_COMPONENT_HPP
-#define FTXUI_COMPONENT_COMPONENT_HPP
+#ifndef FTXUI_COMPONENT_HPP
+#define FTXUI_COMPONENT_HPP
 
-#include <memory>  // for unique_ptr
-#include <vector>  // for vector
+#include <functional>  // for function
+#include <memory>      // for shared_ptr, make_shared
+#include <string>      // for wstring
+#include <vector>      // for vector
 
-#include "ftxui/component/captured_mouse.hpp"  // for CaptureMouse
-#include "ftxui/dom/elements.hpp"             // for Element
+#include "ftxui/component/component_base.hpp"
 
 namespace ftxui {
 
-class Delegate;
-class Focus;
-struct Event;
+class ComponentBase;
 
-/// @brief It implement rendering itself as ftxui::Element. It implement
-/// keyboard navigation by responding to ftxui::Event.
-/// @ingroup component
-class Component {
- public:
-  // Constructor/Destructor.
-  Component() = default;
-  virtual ~Component();
+using Component = std::shared_ptr<ComponentBase>;
+using Components = std::vector<Component>;
 
-  // Component hierarchy.
-  Component* Parent();
-  void Add(Component* children);
+template <class T, class... Args>
+std::shared_ptr<T> Make(Args&&... args) {
+  return std::make_shared<T>(args...);
+}
 
-  // Renders the component.
-  virtual Element Render();
+Component Button(const std::wstring* label, std::function<void()> on_click);
+Component Checkbox(const std::wstring* label, bool* checked);
+Component Input(std::wstring* content, const std::wstring* placeholder);
+Component Menu(const std::vector<std::wstring>* entries, int* selected_);
+Component Radiobox(const std::vector<std::wstring>* entries, int* selected_);
+Component Toggle(const std::vector<std::wstring>* entries, int* selected);
 
-  // Handles an event.
-  // By default, reduce on children with a lazy OR.
-  //
-  // Returns whether the event was handled or not.
-  virtual bool OnEvent(Event);
+template <class T>  // T = {int, float}
+Component Slider(std::wstring label, T* value, T min, T max, T increment);
 
-  // Focus management ----------------------------------------------------------
-  //
-  // If this component contains children, this indicates which one is active,
-  // nullptr if none is active.
-  //
-  // We say an element has the focus if the chain of ActiveChild() from the
-  // root component contains this object.
-  virtual Component* ActiveChild();
+// namespace Component {
+// Component Vertical(Components children);
+// Component Horizontal(Components children);
+// Component Tab(int* selector, Components children);
+//}  // namespace Component
 
-  // Whether this is the active child of its parent.
-  bool Active();
-  // Whether all the ancestors are active.
-  bool Focused();
+};  // namespace ftxui
 
-  // Make the |child| to be the "active" one.
-  virtual void SetActiveChild(Component* child);
+#endif /* end of include guard: FTXUI_COMPONENT_HPP */
 
-  // Configure all the ancestors to give focus to this component.
-  void TakeFocus();
-
- protected:
-  CapturedMouse CaptureMouse(const Event& event);
-
-  std::vector<Component*> children_;
-
- private:
-  Component* parent_ = nullptr;
-  void Detach();
-  void Attach(Component* parent);
-};
-
-using ComponentPtr = std::unique_ptr<Component>;
-
-}  // namespace ftxui
-
-#endif /* end of include guard: FTXUI_COMPONENT_COMPONENT_HPP */
-
-// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
diff --git a/include/ftxui/component/component_base.hpp b/include/ftxui/component/component_base.hpp
new file mode 100644
index 00000000..4e8fd636
--- /dev/null
+++ b/include/ftxui/component/component_base.hpp
@@ -0,0 +1,81 @@
+#ifndef FTXUI_COMPONENT_BASE_HPP
+#define FTXUI_COMPONENT_BASE_HPP
+
+#include <memory>  // for unique_ptr
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for CaptureMouse
+#include "ftxui/dom/elements.hpp"              // for Element
+
+namespace ftxui {
+
+class Delegate;
+class Focus;
+struct Event;
+
+class ComponentBase;
+using Component = std::shared_ptr<ComponentBase>;
+using Components = std::vector<Component>;
+
+/// @brief It implement rendering itself as ftxui::Element. It implement
+/// keyboard navigation by responding to ftxui::Event.
+/// @ingroup component
+class ComponentBase {
+ public:
+  // Constructor/Destructor.
+  ComponentBase() = default;
+  virtual ~ComponentBase();
+
+  // ComponentBase hierarchy.
+  ComponentBase* Parent();
+  void Add(Component children);
+
+  // Renders the component.
+  virtual Element Render();
+
+  // Handles an event.
+  // By default, reduce on children with a lazy OR.
+  //
+  // Returns whether the event was handled or not.
+  virtual bool OnEvent(Event);
+
+  // Focus management ----------------------------------------------------------
+  //
+  // If this component contains children, this indicates which one is active,
+  // nullptr if none is active.
+  //
+  // We say an element has the focus if the chain of ActiveChild() from the
+  // root component contains this object.
+  virtual Component ActiveChild();
+
+  // Whether this is the active child of its parent.
+  bool Active();
+  // Whether all the ancestors are active.
+  bool Focused();
+
+  // Make the |child| to be the "active" one.
+  virtual void SetActiveChild(ComponentBase* child);
+  void SetActiveChild(Component child);
+
+  // Configure all the ancestors to give focus to this component.
+  void TakeFocus();
+
+ protected:
+  CapturedMouse CaptureMouse(const Event& event);
+
+  std::vector<Component> children_;
+
+ private:
+  ComponentBase* parent_ = nullptr;
+  void Detach();
+};
+
+using Component = std::shared_ptr<ComponentBase>;
+
+}  // namespace ftxui
+
+#endif /* end of include guard: FTXUI_COMPONENT_BASE_HPP */
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
diff --git a/include/ftxui/component/container.hpp b/include/ftxui/component/container.hpp
index 3f78798f..19277c79 100644
--- a/include/ftxui/component/container.hpp
+++ b/include/ftxui/component/container.hpp
@@ -1,26 +1,32 @@
 #ifndef FTXUI_COMPONENT_CONTAINER_HPP
 #define FTXUI_COMPONENT_CONTAINER_HPP
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/component/event.hpp"
-#include "ftxui/dom/elements.hpp"
+#include "ftxui/component/component.hpp"       // for Component, Components
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/event.hpp"           // for Event
+#include "ftxui/dom/elements.hpp"              // for Element
 
 namespace ftxui {
 
 /// @brief A component where focus and events are automatically handled for you.
-class Container : public Component {
+class Container : public ComponentBase {
  public:
-  static Container Vertical();
-  static Container Horizontal();
-  static Container Tab(int* selector);
+  static Component Vertical();
+  static Component Vertical(Components children);
+
+  static Component Horizontal();
+  static Component Horizontal(Components children);
+
+  static Component Tab(int* selector);
+  static Component Tab(int* selector, Components children);
 
   ~Container() override = default;
 
   // Component override.
   bool OnEvent(Event event) override;
   Element Render() override;
-  Component* ActiveChild() override;
-  virtual void SetActiveChild(Component*) override;
+  Component ActiveChild() override;
+  virtual void SetActiveChild(ComponentBase*) override;
 
  protected:
   // Handlers
diff --git a/include/ftxui/component/event.hpp b/include/ftxui/component/event.hpp
index e77feae9..3096a86a 100644
--- a/include/ftxui/component/event.hpp
+++ b/include/ftxui/component/event.hpp
@@ -8,7 +8,7 @@
 namespace ftxui {
 
 class ScreenInteractive;
-class Component;
+class ComponentBase;
 
 /// @brief Represent an event. It can be key press event, a terminal resize, or
 /// more ...
@@ -76,7 +76,7 @@ struct Event {
 
   //--- State section ----------------------------------------------------------
  private:
-  friend Component;
+  friend ComponentBase;
   friend ScreenInteractive;
   enum class Type {
     Unknown,
diff --git a/include/ftxui/component/input.hpp b/include/ftxui/component/input.hpp
index fedeacbf..fdfc2af5 100644
--- a/include/ftxui/component/input.hpp
+++ b/include/ftxui/component/input.hpp
@@ -1,27 +1,29 @@
 #ifndef FTXUI_COMPONENT_INPUT_H_
 #define FTXUI_COMPONENT_INPUT_H_
 
-#include <functional>
-#include <string>
+#include <functional>  // for function
+#include <string>      // for wstring
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"              // for Element
+#include "ftxui/screen/box.hpp"                // for Box
 
 namespace ftxui {
 struct Event;
 
 /// @brief An input box. The user can type text into it.
 /// @ingroup component.
-class Input : public Component {
+class InputBase : public ComponentBase {
  public:
+  // Access this interface from a Component
+  static InputBase* From(Component component);
+
   // Constructor.
-  Input() = default;
-  ~Input() override = default;
+  InputBase(std::wstring* content, const std::wstring* placeholder);
+  ~InputBase() override = default;
 
   // State.
-  std::wstring content;
-  std::wstring placeholder;
   int cursor_position = 0;
 
   // State update callback.
@@ -33,6 +35,9 @@ class Input : public Component {
   bool OnEvent(Event) override;
 
  private:
+  std::wstring* const content_;
+  const std::wstring* const placeholder_;
+
   bool OnMouseEvent(Event);
   Box input_box_;
   Box cursor_box_;
diff --git a/include/ftxui/component/menu.hpp b/include/ftxui/component/menu.hpp
index 8e3f2b16..3f30839f 100644
--- a/include/ftxui/component/menu.hpp
+++ b/include/ftxui/component/menu.hpp
@@ -1,28 +1,30 @@
 #ifndef FTXUI_COMPONENT_MENU
 #define FTXUI_COMPONENT_MENU
 
-#include <functional>
-#include <string>
-#include <vector>
+#include <functional>  // for function
+#include <string>      // for wstring
+#include <vector>      // for vector
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"  // for Element, Decorator, operator|, bold, inverted, nothing
+#include "ftxui/screen/box.hpp"  // for Box
 
 namespace ftxui {
 struct Event;
 
 /// @brief A list of items. The user can navigate through them.
 /// @ingroup component
-class Menu : public Component {
+class MenuBase : public ComponentBase {
  public:
+  // Access this interface from a Component
+  static MenuBase* From(Component component);
+
   // Constructor.
-  Menu() = default;
-  ~Menu() override = default;
+  MenuBase(const std::vector<std::wstring>* entries, int* selected_);
+  ~MenuBase() override = default;
 
   // State.
-  std::vector<std::wstring> entries = {};
-  int selected = 0;
   int focused = 0;
 
   Decorator normal_style = nothing;
@@ -38,7 +40,10 @@ class Menu : public Component {
   Element Render() override;
   bool OnEvent(Event) override;
 
- private:
+ protected:
+  const std::vector<std::wstring>* const entries_;
+  int* selected_ = 0;
+
   bool OnMouseEvent(Event);
 
   std::vector<Box> boxes_;
diff --git a/include/ftxui/component/radiobox.hpp b/include/ftxui/component/radiobox.hpp
index 74932450..8df7a32c 100644
--- a/include/ftxui/component/radiobox.hpp
+++ b/include/ftxui/component/radiobox.hpp
@@ -1,12 +1,14 @@
 #ifndef FTXUI_COMPONENT_RADIOBOX_HPP
 #define FTXUI_COMPONENT_RADIOBOX_HPP
 
-#include <string>
-#include <vector>
+#include <functional>  // for function
+#include <string>      // for wstring, allocator
+#include <vector>      // for vector
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"  // for Element, Decorator, inverted, nothing
+#include "ftxui/screen/box.hpp"    // for Box
 
 namespace ftxui {
 struct Event;
@@ -14,15 +16,16 @@ struct Event;
 /// @brief A list of selectable element. One and only one can be selected at
 /// the same time.
 /// @ingroup component
-class RadioBox : public Component {
+class RadioboxBase : public ComponentBase {
  public:
-  // Constructor.
-  RadioBox() = default;
-  ~RadioBox() override = default;
+  // Access this interface from a Component
+  static RadioboxBase* From(Component component);
+
+  // Constructor.
+  RadioboxBase(const std::vector<std::wstring>* entries, int* selected);
+  ~RadioboxBase() override = default;
 
-  int selected = 0;
   int focused = 0;
-  std::vector<std::wstring> entries;
 
 #if defined(_WIN32)
   std::wstring checked = L"(*) ";
@@ -43,6 +46,9 @@ class RadioBox : public Component {
   bool OnEvent(Event) override;
 
  private:
+  const std::vector<std::wstring>* const entries_;
+  int* const selected_;
+
   bool OnMouseEvent(Event event);
   int cursor_position = 0;
   std::vector<Box> boxes_;
diff --git a/include/ftxui/component/screen_interactive.hpp b/include/ftxui/component/screen_interactive.hpp
index c3a32519..0b477d1f 100644
--- a/include/ftxui/component/screen_interactive.hpp
+++ b/include/ftxui/component/screen_interactive.hpp
@@ -3,15 +3,18 @@
 
 #include <atomic>  // for atomic
 #include <ftxui/component/receiver.hpp>
-#include <memory>  // for unique_ptr
-#include <string>  // for string
+#include <functional>  // for function
+#include <memory>      // for unique_ptr, shared_ptr
+#include <string>      // for string
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/event.hpp"
 #include "ftxui/screen/screen.hpp"  // for Screen
 
 namespace ftxui {
-class Component;
+class ComponentBase;
+
+using Component = std::shared_ptr<ComponentBase>;
 struct Event;
 
 class ScreenInteractive : public Screen {
@@ -22,15 +25,15 @@ class ScreenInteractive : public Screen {
   static ScreenInteractive TerminalOutput();
 
   ~ScreenInteractive();
-  void Loop(Component*);
+  void Loop(Component);
   std::function<void()> ExitLoopClosure();
 
   void PostEvent(Event event);
   CapturedMouse CaptureMouse();
 
  private:
-  void Draw(Component* component);
-  void EventLoop(Component* component);
+  void Draw(Component component);
+  void EventLoop(Component component);
 
   enum class Dimension {
     FitComponent,
diff --git a/include/ftxui/component/slider.hpp b/include/ftxui/component/slider.hpp
deleted file mode 100644
index 6b30d427..00000000
--- a/include/ftxui/component/slider.hpp
+++ /dev/null
@@ -1,23 +0,0 @@
-#ifndef FTXUI_COMPONENT_SLIDER_HPP
-#define FTXUI_COMPONENT_SLIDER_HPP
-
-#include <string>
-#include "ftxui/component/component.hpp"
-
-namespace ftxui {
-// ComponentPtr Slider(std::string label,
-// float* value,
-// float min = 0.f,
-// float max = 100.f,
-// float increment = (max - min) * 0.05f);
-
-template <class T>  // T = {int, float}
-ComponentPtr Slider(std::wstring label, T* value, T min, T max, T increment);
-
-}  // namespace ftxui
-
-#endif /* end of include guard: FTXUI_COMPONENT_SLIDER_HPP */
-
-// Copyright 2020 Arthur Sonzogni. All rights reserved.
-// Use of this source code is governed by the MIT license that can be found in
-// the LICENSE file.
diff --git a/include/ftxui/component/toggle.hpp b/include/ftxui/component/toggle.hpp
index bbdd1f1d..af2f22a1 100644
--- a/include/ftxui/component/toggle.hpp
+++ b/include/ftxui/component/toggle.hpp
@@ -1,26 +1,30 @@
 #ifndef FTXUI_COMPONENT_TOGGLE_H_
 #define FTXUI_COMPONENT_TOGGLE_H_
 
-#include <string>
-#include <vector>
+#include <functional>  // for function
+#include <string>      // for wstring
+#include <vector>      // for vector
 
-#include "ftxui/component/component.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/component/component.hpp"       // for Component
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"  // for Element, Decorator, operator|, bold, dim, inverted
+#include "ftxui/screen/box.hpp"  // for Box
 
 namespace ftxui {
 struct Event;
 
 /// @brief An horizontal list of elements. The user can navigate through them.
 /// @ingroup component
-class Toggle : public Component {
+class ToggleBase : public ComponentBase {
  public:
+  // Access this interface from a Component
+  static ToggleBase* From(Component component);
+
   // Constructor.
-  ~Toggle() override = default;
+  ToggleBase(const std::vector<std::wstring>* entries, int* selected);
+  ~ToggleBase() override = default;
 
   // State.
-  std::vector<std::wstring> entries = {L"On", L"Off"};
-  int selected = 0;
   int focused = 0;
 
   Decorator normal_style = dim;
@@ -36,7 +40,10 @@ class Toggle : public Component {
   Element Render() override;
   bool OnEvent(Event) override;
 
- private:
+ protected:
+  const std::vector<std::wstring>* const entries_;
+  int* selected_ = 0;
+
   bool OnMouseEvent(Event event);
   std::vector<Box> boxes_;
 };
diff --git a/iwyu.imp b/iwyu.imp
index feaf961b..388878ca 100644
--- a/iwyu.imp
+++ b/iwyu.imp
@@ -5,4 +5,7 @@
   { symbol: [ "ICANON", private, "<termios.h>", public ] },
   { symbol: [ "termios", private, "<termios.h>", public ] },
   { symbol: [ "TCSANOW", private, "<termios.h>", public ] },
+  { symbol: [ "__shared_ptr_access", private, "", public ] },
+  { symbol: [ "ftxui", private , "", public ] },
+  { include: ["ext/alloc_traits.h", "private", "<memory>", "public"] }
 ]
diff --git a/src/ftxui/component/button.cpp b/src/ftxui/component/button.cpp
index 357b5945..98768792 100644
--- a/src/ftxui/component/button.cpp
+++ b/src/ftxui/component/button.cpp
@@ -9,12 +9,47 @@
 
 namespace ftxui {
 
-Element Button::Render() {
-  auto style = Focused() ? inverted : nothing;
-  return text(label) | border | style | reflect(box_);
+/// @brief Draw a button. Execute a function when clicked.
+/// @param label The label of the button.
+/// @param on_click The action to execute when clicked.
+/// @ingroup component
+/// @see ButtonBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::FitComponent();
+/// std::wstring label = L"Click to quit";
+/// Component button = Button(&label, screen.ExitLoopClosure());
+/// screen.Loop(button)
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// ┌─────────────┐
+/// │Click to quit│
+/// └─────────────┘
+/// ```
+Component Button(const std::wstring* label, std::function<void()> on_click) {
+  return Make<ButtonBase>(label, on_click);
 }
 
-bool Button::OnEvent(Event event) {
+// static
+ButtonBase* ButtonBase::From(Component component) {
+  return static_cast<ButtonBase*>(component.get());
+}
+
+ButtonBase::ButtonBase(const std::wstring* label,
+                       std::function<void()> on_click)
+    : label_(label), on_click_(on_click) {}
+
+Element ButtonBase::Render() {
+  auto style = Focused() ? inverted : nothing;
+  return text(*label_) | border | style | reflect(box_);
+}
+
+bool ButtonBase::OnEvent(Event event) {
   if (event.is_mouse() && box_.Contain(event.mouse().x, event.mouse().y)) {
     if (!CaptureMouse(event))
       return false;
@@ -23,7 +58,7 @@ bool Button::OnEvent(Event event) {
 
     if (event.mouse().button == Mouse::Left &&
         event.mouse().motion == Mouse::Pressed) {
-      on_click();
+      on_click_();
       return true;
     }
 
@@ -31,7 +66,7 @@ bool Button::OnEvent(Event event) {
   }
 
   if (event == Event::Return) {
-    on_click();
+    on_click_();
     return true;
   }
   return false;
diff --git a/src/ftxui/component/checkbox.cpp b/src/ftxui/component/checkbox.cpp
index a7382d87..011293f3 100644
--- a/src/ftxui/component/checkbox.cpp
+++ b/src/ftxui/component/checkbox.cpp
@@ -9,29 +9,62 @@
 
 namespace ftxui {
 
-Element CheckBox::Render() {
+/// @brief Draw checkable element.
+/// @param label The label of the checkbox.
+/// @param checked Whether the checkbox is checked or not.
+/// @ingroup component
+/// @see CheckboxBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::FitComponent();
+/// std::wstring label = L"Make a sandwidth";
+/// bool checked = false;
+/// Component checkbox = Checkbox(&label, &checked);
+/// screen.Loop(checkbox)
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// ☐ Make a sandwitch
+/// ```
+Component Checkbox(const std::wstring* label, bool* checked) {
+  return Make<CheckboxBase>(label, checked);
+}
+
+// static
+CheckboxBase* From(Component component) {
+  return static_cast<CheckboxBase*>(component.get());
+}
+
+CheckboxBase::CheckboxBase(const std::wstring* label, bool* state)
+    : label_(label), state_(state) {}
+
+Element CheckboxBase::Render() {
   bool is_focused = Focused();
   auto style = is_focused ? focused_style : unfocused_style;
-  auto focus_management = is_focused ? focus : state ? select : nothing;
-  return hbox(text(state ? checked : unchecked),
-              text(label) | style | focus_management) |
+  auto focus_management = is_focused ? focus : *state_ ? select : nothing;
+  return hbox(text(*state_ ? checked : unchecked),
+              text(*label_) | style | focus_management) |
          reflect(box_);
 }
 
-bool CheckBox::OnEvent(Event event) {
+bool CheckboxBase::OnEvent(Event event) {
   if (event.is_mouse())
     return OnMouseEvent(event);
 
   if (event == Event::Character(' ') || event == Event::Return) {
-    state = !state;
+    *state_ = !*state_;
     on_change();
     return true;
   }
   return false;
 }
 
-bool CheckBox::OnMouseEvent(Event event) {
-    if (!CaptureMouse(event))
+bool CheckboxBase::OnMouseEvent(Event event) {
+  if (!CaptureMouse(event))
     return false;
   if (!box_.Contain(event.mouse().x, event.mouse().y))
     return false;
@@ -40,7 +73,7 @@ bool CheckBox::OnMouseEvent(Event event) {
 
   if (event.mouse().button == Mouse::Left &&
       event.mouse().motion == Mouse::Pressed) {
-    state = !state;
+    *state_ = !*state_;
     on_change();
     return true;
   }
diff --git a/src/ftxui/component/component.cpp b/src/ftxui/component/component.cpp
index 875d759f..7f13276d 100644
--- a/src/ftxui/component/component.cpp
+++ b/src/ftxui/component/component.cpp
@@ -1,10 +1,14 @@
+#include <algorithm>           // for find_if
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <iterator>            // for begin, end
+#include <utility>             // for move
+
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse, CapturedMouseInterface
 #include "ftxui/component/component.hpp"
-
-#include <algorithm>
-
-#include "ftxui/component/captured_mouse.hpp"
-#include "ftxui/component/event.hpp"
-#include "ftxui/component/screen_interactive.hpp"
+#include "ftxui/component/component_base.hpp"  // for ComponentBase, Component
+#include "ftxui/component/event.hpp"           // for Event
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"                  // for text, Element
 
 namespace ftxui {
 
@@ -13,33 +17,35 @@ class CaptureMouseImpl : public CapturedMouseInterface {
  public:
   ~CaptureMouseImpl() override {}
 };
-}
+}  // namespace
 
-Component::~Component() {
+ComponentBase::~ComponentBase() {
   Detach();
 }
 
-/// @brief Return the parent Component, or nul if any.
+/// @brief Return the parent ComponentBase, or nul if any.
 /// @see Attach
 /// @see Detach
 /// @see Parent
 /// @ingroup component
-Component* Component::Parent() {
+ComponentBase* ComponentBase::Parent() {
   return parent_;
 }
 
 /// @brief Add a children.
 /// @@param child The child to be attached.
 /// @ingroup component
-void Component::Add(Component* child) {
-  child->Attach(this);
+void ComponentBase::Add(Component child) {
+  child->Detach();
+  child->parent_ = this;
+  children_.push_back(std::move(child));
 }
 
 /// @brief Draw the component.
 /// Build a ftxui::Element to be drawn on the ftxi::Screen representing this
-/// ftxui::Component.
+/// ftxui::ComponentBase.
 /// @ingroup component
-Element Component::Render() {
+Element ComponentBase::Render() {
   if (children_.size() == 1)
     return children_.front()->Render();
 
@@ -52,8 +58,8 @@ Element Component::Render() {
 /// The default implementation called OnEvent on every child until one return
 /// true. If none returns true, return false.
 /// @ingroup component
-bool Component::OnEvent(Event event) {
-  for (Component* child : children_) {
+bool ComponentBase::OnEvent(Event event) {
+  for (Component& child : children_) {
     if (child->OnEvent(event))
       return true;
   }
@@ -63,27 +69,27 @@ bool Component::OnEvent(Event event) {
 /// @brief Return the currently Active child.
 /// @return the currently Active child.
 /// @ingroup component
-Component* Component::ActiveChild() {
+Component ComponentBase::ActiveChild() {
   return children_.empty() ? nullptr : children_.front();
 }
 
 /// @brief Returns if the element if the currently active child of its parent.
 /// @ingroup component
-bool Component::Active() {
-  return !parent_ || parent_->ActiveChild() == this;
+bool ComponentBase::Active() {
+  return !parent_ || parent_->ActiveChild().get() == this;
 }
 
 /// @brief Returns if the elements if focused by the user.
-/// True when the Component is focused by the user. An element is Focused when
-/// it is with all its ancestors the ActiveChild() of their parents.
+/// True when the ComponentBase is focused by the user. An element is Focused
+/// when it is with all its ancestors the ActiveChild() of their parents.
 /// @ingroup component
-bool Component::Focused() {
-  Component* current = this;
+bool ComponentBase::Focused() {
+  ComponentBase* current = this;
   for (;;) {
-    Component* parent = current->parent_;
+    ComponentBase* parent = current->parent_;
     if (!parent)
       return true;
-    if (parent->ActiveChild() != current)
+    if (parent->ActiveChild().get() != current)
       return false;
     current = parent;
   }
@@ -92,13 +98,20 @@ bool Component::Focused() {
 /// @brief Make the |child| to be the "active" one.
 /// @argument child the child to become active.
 /// @ingroup component
-void Component::SetActiveChild(Component*) {}
+void ComponentBase::SetActiveChild(ComponentBase*) {}
+
+/// @brief Make the |child| to be the "active" one.
+/// @argument child the child to become active.
+/// @ingroup component
+void ComponentBase::SetActiveChild(Component child) {
+  SetActiveChild(child.get());
+}
 
 /// @brief Configure all the ancestors to give focus to this component.
 /// @ingroup component
-void Component::TakeFocus() {
-  Component* child = this;
-  Component* parent = parent_;
+void ComponentBase::TakeFocus() {
+  ComponentBase* child = this;
+  ComponentBase* parent = parent_;
   while (parent) {
     parent->SetActiveChild(child);
     child = parent;
@@ -110,7 +123,7 @@ void Component::TakeFocus() {
 /// them. It represents a component taking priority over others.
 /// @argument event
 /// @ingroup component
-CapturedMouse Component::CaptureMouse(const Event& event) {
+CapturedMouse ComponentBase::CaptureMouse(const Event& event) {
   if (!event.screen_)
     return std::make_unique<CaptureMouseImpl>();
   return event.screen_->CaptureMouse();
@@ -121,25 +134,17 @@ CapturedMouse Component::CaptureMouse(const Event& event) {
 /// @see Detach
 /// @see Parent
 /// @ingroup component
-void Component::Detach() {
+void ComponentBase::Detach() {
   if (!parent_)
     return;
-  auto it = std::find(std::begin(parent_->children_),
-                      std::end(parent_->children_), this);
+  auto it = std::find_if(std::begin(parent_->children_),  //
+                         std::end(parent_->children_),    //
+                         [this](const Component& that) {  //
+                           return this == that.get();
+                         });
   parent_->children_.erase(it);
 }
 
-/// @brief Attach this element to its parent.
-/// @see Attach
-/// @see Detach
-/// @see Parent
-/// @ingroup component
-void Component::Attach(Component* parent) {
-  Detach();
-  parent_ = parent;
-  parent_->children_.push_back(this);
-}
-
 }  // namespace ftxui
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/src/ftxui/component/container.cpp b/src/ftxui/component/container.cpp
index 7c01a1d0..7efc0dcf 100644
--- a/src/ftxui/component/container.cpp
+++ b/src/ftxui/component/container.cpp
@@ -1,33 +1,69 @@
-#include "ftxui/component/container.hpp"
+#include <stddef.h>            // for size_t
+#include <algorithm>           // for max, min
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>  // for __shared_ptr_access, shared_ptr, make_shared, __shared_ptr_access<>::element_type, allocator_traits<>::value_type
+#include <utility>  // for move
+#include <vector>   // for vector, allocator
 
-#include <stddef.h>
-#include <algorithm>
-#include <vector>
+#include "ftxui/component/container.hpp"
 
 namespace ftxui {
 
+Component ContainerVertical(Components children) {
+  return Container::Vertical(std::move(children));
+}
+
+Component ContainerHorizontal(Components children) {
+  return Container::Horizontal(std::move(children));
+}
+
+Component ContainerTab(int* selector, Components children) {
+  return Container::Tab(selector, std::move(children));
+}
+
 // static
-Container Container::Horizontal() {
-  Container container;
-  container.event_handler_ = &Container::HorizontalEvent;
-  container.render_handler_ = &Container::HorizontalRender;
+Component Container::Vertical() {
+  return Vertical({});
+}
+
+// static
+Component Container::Vertical(Components children) {
+  auto container = std::make_shared<Container>();
+  container->event_handler_ = &Container::VerticalEvent;
+  container->render_handler_ = &Container::VerticalRender;
+  for (Component& child : children)
+    container->Add(std::move(child));
   return container;
 }
 
 // static
-Container Container::Vertical() {
-  Container container;
-  container.event_handler_ = &Container::VerticalEvent;
-  container.render_handler_ = &Container::VerticalRender;
+Component Container::Horizontal() {
+  return Horizontal({});
+}
+
+// static
+Component Container::Horizontal(Components children) {
+  auto container = std::make_shared<Container>();
+  container->event_handler_ = &Container::HorizontalEvent;
+  container->render_handler_ = &Container::HorizontalRender;
+  for (Component& child : children)
+    container->Add(std::move(child));
   return container;
 }
 
 // static
-Container Container::Tab(int* selector) {
-  Container container;
-  container.event_handler_ = &Container::TabEvent;
-  container.render_handler_ = &Container::TabRender;
-  container.selector_ = selector;
+Component Container::Tab(int* selector) {
+  return Tab(selector, {});
+}
+
+// static
+Component Container::Tab(int* selector, Components children) {
+  auto container = std::make_shared<Container>();
+  container->selector_ = selector;
+  container->event_handler_ = &Container::TabEvent;
+  container->render_handler_ = &Container::TabRender;
+  for (Component& child : children)
+    container->Add(std::move(child));
   return container;
 }
 
@@ -44,7 +80,7 @@ bool Container::OnEvent(Event event) {
   return (this->*event_handler_)(event);
 }
 
-Component* Container::ActiveChild() {
+Component Container::ActiveChild() {
   if (children_.size() == 0)
     return nullptr;
 
@@ -52,9 +88,9 @@ Component* Container::ActiveChild() {
   return children_[selected % children_.size()];
 }
 
-void Container::SetActiveChild(Component* child) {
+void Container::SetActiveChild(ComponentBase* child) {
   for (size_t i = 0; i < children_.size(); ++i) {
-    if (children_[i] == child) {
+    if (children_[i].get() == child) {
       (selector_ ? *selector_ : selected_) = i;
       return;
     }
@@ -114,7 +150,7 @@ Element Container::HorizontalRender() {
 }
 
 Element Container::TabRender() {
-  Component* active_child = ActiveChild();
+  Component active_child = ActiveChild();
   if (active_child)
     return active_child->Render();
   return text(L"Empty container");
@@ -124,7 +160,7 @@ bool Container::OnMouseEvent(Event event) {
   if (selector_)
     return ActiveChild()->OnEvent(event);
 
-  for (Component* child : children_) {
+  for (Component& child : children_) {
     if (child->OnEvent(event))
       return true;
   }
diff --git a/src/ftxui/component/container_test.cpp b/src/ftxui/component/container_test.cpp
index da47638c..c4f4571c 100644
--- a/src/ftxui/component/container_test.cpp
+++ b/src/ftxui/component/container_test.cpp
@@ -1,205 +1,205 @@
-#include <gtest/gtest-message.h>    // for Message
-#include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver
-#include <memory>                   // for allocator
+#include <gtest/gtest-message.h>  // for Message
+#include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
+#include <memory>  // for __shared_ptr_access, shared_ptr, allocator
 
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/container.hpp"
-#include "ftxui/screen/box.hpp"     // for ftxui
-#include "gtest/gtest_pred_impl.h"  // for AssertionResult, EXPECT_EQ, EXPEC...
+#include "gtest/gtest_pred_impl.h"  // for AssertionResult, EXPECT_EQ, EXPECT_FALSE, EXPECT_TRUE, Test, TEST
 
 using namespace ftxui;
 
 TEST(ContainerTest, HorizontalEvent) {
   auto container = Container::Horizontal();
   Component c0, c1, c2;
-  container.Add(&c0);
-  container.Add(&c1);
-  container.Add(&c2);
+  container->Add(c0);
+  container->Add(c1);
+  container->Add(c2);
 
   // With arrow key.
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With arrow key in the wrong dimension.
-  container.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  container->OnEvent(Event::ArrowUp);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowDown);
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With vim like characters.
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('l'));
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Character('l'));
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Character('l'));
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Character('h'));
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Character('h'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('h'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('l'));
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Character('l'));
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Character('l'));
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Character('h'));
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Character('h'));
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('h'));
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With vim like characters in the wrong direction.
-  container.OnEvent(Event::Character('j'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('k'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  container->OnEvent(Event::Character('j'));
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('k'));
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With tab characters.
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::TabReverse);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::TabReverse);
 }
 
 TEST(ContainerTest, VerticalEvent) {
   auto container = Container::Vertical();
   Component c0, c1, c2;
-  container.Add(&c0);
-  container.Add(&c1);
-  container.Add(&c2);
+  container->Add(c0);
+  container->Add(c1);
+  container->Add(c2);
 
   // With arrow key.
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowDown);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::ArrowDown);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::ArrowDown);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::ArrowUp);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::ArrowUp);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowUp);
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With arrow key in the wrong dimension.
-  container.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  container->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With vim like characters.
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('j'));
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Character('j'));
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Character('j'));
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Character('k'));
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Character('k'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('k'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('j'));
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Character('j'));
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Character('j'));
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Character('k'));
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Character('k'));
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('k'));
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With vim like characters in the wrong direction.
-  container.OnEvent(Event::Character('h'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Character('l'));
-  EXPECT_EQ(container.ActiveChild(), &c0);
+  container->OnEvent(Event::Character('h'));
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Character('l'));
+  EXPECT_EQ(container->ActiveChild(), c0);
 
   // With tab characters.
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::Tab);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  container.OnEvent(Event::TabReverse);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  container.OnEvent(Event::TabReverse);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::Tab);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  container->OnEvent(Event::TabReverse);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  container->OnEvent(Event::TabReverse);
 }
 
 TEST(ContainerTest, SetActiveChild) {
   auto container = Container::Horizontal();
   Component c0, c1, c2;
-  container.Add(&c0);
-  container.Add(&c1);
-  container.Add(&c2);
+  container->Add(c0);
+  container->Add(c1);
+  container->Add(c2);
 
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  EXPECT_TRUE(c0.Focused());
-  EXPECT_TRUE(c0.Active());
-  EXPECT_FALSE(c1.Focused());
-  EXPECT_FALSE(c1.Active());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_FALSE(c2.Active());
+  EXPECT_EQ(container->ActiveChild(), c0);
+  EXPECT_TRUE(c0->Focused());
+  EXPECT_TRUE(c0->Active());
+  EXPECT_FALSE(c1->Focused());
+  EXPECT_FALSE(c1->Active());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_FALSE(c2->Active());
 
-  container.SetActiveChild(&c0);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  EXPECT_TRUE(c0.Focused());
-  EXPECT_TRUE(c0.Active());
-  EXPECT_FALSE(c1.Focused());
-  EXPECT_FALSE(c1.Active());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_FALSE(c2.Active());
+  container->SetActiveChild(c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  EXPECT_TRUE(c0->Focused());
+  EXPECT_TRUE(c0->Active());
+  EXPECT_FALSE(c1->Focused());
+  EXPECT_FALSE(c1->Active());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_FALSE(c2->Active());
 
-  container.SetActiveChild(&c1);
-  EXPECT_EQ(container.ActiveChild(), &c1);
-  EXPECT_FALSE(c0.Focused());
-  EXPECT_FALSE(c0.Active());
-  EXPECT_TRUE(c1.Focused());
-  EXPECT_TRUE(c1.Active());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_FALSE(c2.Active());
+  container->SetActiveChild(c1);
+  EXPECT_EQ(container->ActiveChild(), c1);
+  EXPECT_FALSE(c0->Focused());
+  EXPECT_FALSE(c0->Active());
+  EXPECT_TRUE(c1->Focused());
+  EXPECT_TRUE(c1->Active());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_FALSE(c2->Active());
 
-  container.SetActiveChild(&c2);
-  EXPECT_EQ(container.ActiveChild(), &c2);
-  EXPECT_FALSE(c0.Focused());
-  EXPECT_FALSE(c0.Active());
-  EXPECT_FALSE(c1.Focused());
-  EXPECT_FALSE(c1.Active());
-  EXPECT_TRUE(c2.Focused());
-  EXPECT_TRUE(c2.Active());
+  container->SetActiveChild(c2);
+  EXPECT_EQ(container->ActiveChild(), c2);
+  EXPECT_FALSE(c0->Focused());
+  EXPECT_FALSE(c0->Active());
+  EXPECT_FALSE(c1->Focused());
+  EXPECT_FALSE(c1->Active());
+  EXPECT_TRUE(c2->Focused());
+  EXPECT_TRUE(c2->Active());
 
-  container.SetActiveChild(&c0);
-  EXPECT_EQ(container.ActiveChild(), &c0);
-  EXPECT_TRUE(c0.Focused());
-  EXPECT_TRUE(c0.Active());
-  EXPECT_FALSE(c1.Focused());
-  EXPECT_FALSE(c1.Active());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_FALSE(c2.Active());
+  container->SetActiveChild(c0);
+  EXPECT_EQ(container->ActiveChild(), c0);
+  EXPECT_TRUE(c0->Focused());
+  EXPECT_TRUE(c0->Active());
+  EXPECT_FALSE(c1->Focused());
+  EXPECT_FALSE(c1->Active());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_FALSE(c2->Active());
 }
 
 TEST(ContainerTest, TakeFocus) {
@@ -214,74 +214,74 @@ TEST(ContainerTest, TakeFocus) {
   auto c22 = Container::Horizontal();
   auto c23 = Container::Horizontal();
 
-  c.Add(&c1);
-  c.Add(&c2);
-  c.Add(&c3);
-  c1.Add(&c11);
-  c1.Add(&c12);
-  c1.Add(&c13);
-  c2.Add(&c21);
-  c2.Add(&c22);
-  c2.Add(&c23);
+  c->Add(c1);
+  c->Add(c2);
+  c->Add(c3);
+  c1->Add(c11);
+  c1->Add(c12);
+  c1->Add(c13);
+  c2->Add(c21);
+  c2->Add(c22);
+  c2->Add(c23);
 
-  EXPECT_TRUE(c.Focused());
-  EXPECT_TRUE(c1.Focused());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_TRUE(c11.Focused());
-  EXPECT_FALSE(c12.Focused());
-  EXPECT_FALSE(c13.Focused());
-  EXPECT_FALSE(c21.Focused());
-  EXPECT_FALSE(c22.Focused());
-  EXPECT_FALSE(c23.Focused());
-  EXPECT_TRUE(c.Active());
-  EXPECT_TRUE(c1.Active());
-  EXPECT_FALSE(c2.Active());
-  EXPECT_TRUE(c11.Active());
-  EXPECT_FALSE(c12.Active());
-  EXPECT_FALSE(c13.Active());
-  EXPECT_TRUE(c21.Active());
-  EXPECT_FALSE(c22.Active());
-  EXPECT_FALSE(c23.Active());
+  EXPECT_TRUE(c->Focused());
+  EXPECT_TRUE(c1->Focused());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_TRUE(c11->Focused());
+  EXPECT_FALSE(c12->Focused());
+  EXPECT_FALSE(c13->Focused());
+  EXPECT_FALSE(c21->Focused());
+  EXPECT_FALSE(c22->Focused());
+  EXPECT_FALSE(c23->Focused());
+  EXPECT_TRUE(c->Active());
+  EXPECT_TRUE(c1->Active());
+  EXPECT_FALSE(c2->Active());
+  EXPECT_TRUE(c11->Active());
+  EXPECT_FALSE(c12->Active());
+  EXPECT_FALSE(c13->Active());
+  EXPECT_TRUE(c21->Active());
+  EXPECT_FALSE(c22->Active());
+  EXPECT_FALSE(c23->Active());
 
-  c22.TakeFocus();
-  EXPECT_TRUE(c.Focused());
-  EXPECT_FALSE(c1.Focused());
-  EXPECT_TRUE(c2.Focused());
-  EXPECT_FALSE(c11.Focused());
-  EXPECT_FALSE(c12.Focused());
-  EXPECT_FALSE(c13.Focused());
-  EXPECT_FALSE(c21.Focused());
-  EXPECT_TRUE(c22.Focused());
-  EXPECT_FALSE(c23.Focused());
-  EXPECT_TRUE(c.Active());
-  EXPECT_FALSE(c1.Active());
-  EXPECT_TRUE(c2.Active());
-  EXPECT_TRUE(c11.Active());
-  EXPECT_FALSE(c12.Active());
-  EXPECT_FALSE(c13.Active());
-  EXPECT_FALSE(c21.Active());
-  EXPECT_TRUE(c22.Active());
-  EXPECT_FALSE(c23.Active());
+  c22->TakeFocus();
+  EXPECT_TRUE(c->Focused());
+  EXPECT_FALSE(c1->Focused());
+  EXPECT_TRUE(c2->Focused());
+  EXPECT_FALSE(c11->Focused());
+  EXPECT_FALSE(c12->Focused());
+  EXPECT_FALSE(c13->Focused());
+  EXPECT_FALSE(c21->Focused());
+  EXPECT_TRUE(c22->Focused());
+  EXPECT_FALSE(c23->Focused());
+  EXPECT_TRUE(c->Active());
+  EXPECT_FALSE(c1->Active());
+  EXPECT_TRUE(c2->Active());
+  EXPECT_TRUE(c11->Active());
+  EXPECT_FALSE(c12->Active());
+  EXPECT_FALSE(c13->Active());
+  EXPECT_FALSE(c21->Active());
+  EXPECT_TRUE(c22->Active());
+  EXPECT_FALSE(c23->Active());
 
-  c1.TakeFocus();
-  EXPECT_TRUE(c.Focused());
-  EXPECT_TRUE(c1.Focused());
-  EXPECT_FALSE(c2.Focused());
-  EXPECT_TRUE(c11.Focused());
-  EXPECT_FALSE(c12.Focused());
-  EXPECT_FALSE(c13.Focused());
-  EXPECT_FALSE(c21.Focused());
-  EXPECT_FALSE(c22.Focused());
-  EXPECT_FALSE(c23.Focused());
-  EXPECT_TRUE(c.Active());
-  EXPECT_TRUE(c1.Active());
-  EXPECT_FALSE(c2.Active());
-  EXPECT_TRUE(c11.Active());
-  EXPECT_FALSE(c12.Active());
-  EXPECT_FALSE(c13.Active());
-  EXPECT_FALSE(c21.Active());
-  EXPECT_TRUE(c22.Active());
-  EXPECT_FALSE(c23.Active());
+  c1->TakeFocus();
+  EXPECT_TRUE(c->Focused());
+  EXPECT_TRUE(c1->Focused());
+  EXPECT_FALSE(c2->Focused());
+  EXPECT_TRUE(c11->Focused());
+  EXPECT_FALSE(c12->Focused());
+  EXPECT_FALSE(c13->Focused());
+  EXPECT_FALSE(c21->Focused());
+  EXPECT_FALSE(c22->Focused());
+  EXPECT_FALSE(c23->Focused());
+  EXPECT_TRUE(c->Active());
+  EXPECT_TRUE(c1->Active());
+  EXPECT_FALSE(c2->Active());
+  EXPECT_TRUE(c11->Active());
+  EXPECT_FALSE(c12->Active());
+  EXPECT_FALSE(c13->Active());
+  EXPECT_FALSE(c21->Active());
+  EXPECT_TRUE(c22->Active());
+  EXPECT_FALSE(c23->Active());
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/src/ftxui/component/event.cpp b/src/ftxui/component/event.cpp
index 6987368f..c90228e5 100644
--- a/src/ftxui/component/event.cpp
+++ b/src/ftxui/component/event.cpp
@@ -1,7 +1,8 @@
-#include "ftxui/component/event.hpp"
+#include <utility>  // for move
 
-#include "ftxui/component/mouse.hpp"
-#include "ftxui/screen/string.hpp"
+#include "ftxui/component/event.hpp"
+#include "ftxui/component/mouse.hpp"  // for Mouse
+#include "ftxui/screen/string.hpp"    // for to_wstring
 
 namespace ftxui {
 
diff --git a/src/ftxui/component/input.cpp b/src/ftxui/component/input.cpp
index 5097bbda..35a162f7 100644
--- a/src/ftxui/component/input.cpp
+++ b/src/ftxui/component/input.cpp
@@ -1,39 +1,73 @@
+#include <algorithm>  // for max, min
+#include <memory>     // for shared_ptr
+
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Backspace, Event::Custom, Event::Delete, Event::End, Event::Home, Event::Return
 #include "ftxui/component/input.hpp"
-
-#include <algorithm>
-#include <memory>
-
-#include "ftxui/component/captured_mouse.hpp"
-#include "ftxui/component/mouse.hpp"
-#include "ftxui/component/screen_interactive.hpp"
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed
+#include "ftxui/component/screen_interactive.hpp"  // for Component
 
 namespace ftxui {
 
+/// @brief An input box for editing text.
+/// @param content The editable content.
+/// @param placeholder The text displayed when content is still empty.
+/// @ingroup component
+/// @see InputBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::FitComponent();
+/// std::wstring content= L"";
+/// std::wstring placeholder = L"placeholder";
+/// Component input = Input(&content, &placeholder);
+/// screen.Loop(input);
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// placeholder
+/// ```
+Component Input(std::wstring* content, const std::wstring* placeholder) {
+  return Make<InputBase>(content, placeholder);
+}
+
+// static
+InputBase* InputBase::From(Component component) {
+  return static_cast<InputBase*>(component.get());
+}
+
+InputBase::InputBase(std::wstring* content, const std::wstring* placeholder)
+    : content_(content), placeholder_(placeholder) {}
+
 // Component implementation.
-Element Input::Render() {
-  cursor_position = std::max(0, std::min<int>(content.size(), cursor_position));
+Element InputBase::Render() {
+  cursor_position =
+      std::max(0, std::min<int>(content_->size(), cursor_position));
   auto main_decorator = flex | size(HEIGHT, EQUAL, 1);
   bool is_focused = Focused();
 
-  // Placeholder.
-  if (content.size() == 0) {
+  // placeholder.
+  if (content_->size() == 0) {
     if (is_focused)
-      return text(placeholder) | focus | dim | inverted | main_decorator |
+      return text(*placeholder_) | focus | dim | inverted | main_decorator |
              reflect(input_box_);
     else
-      return text(placeholder) | dim | main_decorator | reflect(input_box_);
+      return text(*placeholder_) | dim | main_decorator | reflect(input_box_);
   }
 
   // Not focused.
   if (!is_focused)
-    return text(content) | main_decorator | reflect(input_box_);
+    return text(*content_) | main_decorator | reflect(input_box_);
 
-  std::wstring part_before_cursor = content.substr(0, cursor_position);
-  std::wstring part_at_cursor = cursor_position < (int)content.size()
-                                    ? content.substr(cursor_position, 1)
+  std::wstring part_before_cursor = content_->substr(0, cursor_position);
+  std::wstring part_at_cursor = cursor_position < (int)content_->size()
+                                    ? content_->substr(cursor_position, 1)
                                     : L" ";
-  std::wstring part_after_cursor = cursor_position < (int)content.size() - 1
-                                       ? content.substr(cursor_position + 1)
+  std::wstring part_after_cursor = cursor_position < (int)content_->size() - 1
+                                       ? content_->substr(cursor_position + 1)
                                        : L"";
   auto focused = is_focused ? focus : select;
 
@@ -47,8 +81,9 @@ Element Input::Render() {
   // clang-format on
 }
 
-bool Input::OnEvent(Event event) {
-  cursor_position = std::max(0, std::min<int>(content.size(), cursor_position));
+bool InputBase::OnEvent(Event event) {
+  cursor_position =
+      std::max(0, std::min<int>(content_->size(), cursor_position));
 
   if (event.is_mouse())
     return OnMouseEvent(event);
@@ -59,7 +94,7 @@ bool Input::OnEvent(Event event) {
   if (event == Event::Backspace) {
     if (cursor_position == 0)
       return false;
-    content.erase(cursor_position - 1, 1);
+    content_->erase(cursor_position - 1, 1);
     cursor_position--;
     on_change();
     return true;
@@ -67,9 +102,9 @@ bool Input::OnEvent(Event event) {
 
   // Delete
   if (event == Event::Delete) {
-    if (cursor_position == int(content.size()))
+    if (cursor_position == int(content_->size()))
       return false;
-    content.erase(cursor_position, 1);
+    content_->erase(cursor_position, 1);
     on_change();
     return true;
   }
@@ -89,7 +124,7 @@ bool Input::OnEvent(Event event) {
     return true;
   }
 
-  if (event == Event::ArrowRight && cursor_position < (int)content.size()) {
+  if (event == Event::ArrowRight && cursor_position < (int)content_->size()) {
     cursor_position++;
     return true;
   }
@@ -100,13 +135,13 @@ bool Input::OnEvent(Event event) {
   }
 
   if (event == Event::End) {
-    cursor_position = (int)content.size();
+    cursor_position = (int)content_->size();
     return true;
   }
 
   // Content
   if (event.is_character()) {
-    content.insert(cursor_position, 1, event.character());
+    content_->insert(cursor_position, 1, event.character());
     cursor_position++;
     on_change();
     return true;
@@ -114,7 +149,7 @@ bool Input::OnEvent(Event event) {
   return false;
 }
 
-bool Input::OnMouseEvent(Event event) {
+bool InputBase::OnMouseEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   if (!input_box_.Contain(event.mouse().x, event.mouse().y))
@@ -127,7 +162,7 @@ bool Input::OnMouseEvent(Event event) {
     int new_cursor_position =
         cursor_position + event.mouse().x - cursor_box_.x_min;
     new_cursor_position =
-        std::max(0, std::min<int>(content.size(), new_cursor_position));
+        std::max(0, std::min<int>(content_->size(), new_cursor_position));
     if (cursor_position != new_cursor_position) {
       cursor_position = new_cursor_position;
       on_change();
diff --git a/src/ftxui/component/input_test.cpp b/src/ftxui/component/input_test.cpp
index 7f4fa503..c1d1b12f 100644
--- a/src/ftxui/component/input_test.cpp
+++ b/src/ftxui/component/input_test.cpp
@@ -1,159 +1,181 @@
-#include "ftxui/component/input.hpp"
-#include "ftxui/component/event.hpp"
+#include <gtest/gtest-message.h>    // for Message
+#include <gtest/gtest-test-part.h>  // for TestPartResult
+#include <memory>                   // for __shared_ptr_access
 
-#include "gtest/gtest.h"
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Backspace, Event::Delete, Event::End, Event::Home
+#include "ftxui/component/input.hpp"
+#include "gtest/gtest_pred_impl.h"  // for Test, EXPECT_EQ, SuiteApiResolver, TEST, TestFactoryImpl
 
 using namespace ftxui;
 
 TEST(InputTest, Init) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  EXPECT_EQ(input.content, L"");
-  EXPECT_EQ(input.placeholder, L"");
-  EXPECT_EQ(input.cursor_position, 0);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0);
 }
 
 TEST(InputTest, Type) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  EXPECT_EQ(input.content, L"a");
-  EXPECT_EQ(input.cursor_position, 1u);
+  input->OnEvent(Event::Character('a'));
+  EXPECT_EQ(content, L"a");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 1u);
 
-  input.OnEvent(Event::Character('b'));
-  EXPECT_EQ(input.content, L"ab");
-  EXPECT_EQ(input.cursor_position, 2u);
+  input->OnEvent(Event::Character('b'));
+  EXPECT_EQ(content, L"ab");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 }
 
 TEST(InputTest, Arrow) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
 
-  EXPECT_EQ(input.cursor_position, 3u);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 3u);
 
-  input.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(input.cursor_position, 2u);
+  input->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 
-  input.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(input.cursor_position, 1u);
+  input->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 1u);
 
-  input.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(input.cursor_position, 0u);
+  input->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0u);
 
-  input.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(input.cursor_position, 0u);
+  input->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0u);
 
-  input.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(input.cursor_position, 1u);
+  input->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 1u);
 
-  input.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(input.cursor_position, 2u);
+  input->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 
-  input.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(input.cursor_position, 3u);
+  input->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 3u);
 
-  input.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(input.cursor_position, 3u);
+  input->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 3u);
 }
 
 TEST(InputTest, Insert) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
-  EXPECT_EQ(input.content, L"abc");
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
+  EXPECT_EQ(content, L"abc");
 
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::Character('-'));
-  EXPECT_EQ(input.content, L"a-bc");
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::Character('-'));
+  EXPECT_EQ(content, L"a-bc");
 
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::Character('-'));
-  EXPECT_EQ(input.content, L"a--bc");
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::Character('-'));
+  EXPECT_EQ(content, L"a--bc");
 
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::Character('-'));
-  EXPECT_EQ(input.content, L"-a--bc");
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::Character('-'));
+  EXPECT_EQ(content, L"-a--bc");
 }
 
 TEST(InputTest, Home) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
-  EXPECT_EQ(input.content, L"abc");
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
+  EXPECT_EQ(content, L"abc");
 
-  EXPECT_EQ(input.cursor_position, 3u);
-  input.OnEvent(Event::Home);
-  EXPECT_EQ(input.cursor_position, 0u);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 3u);
+  input->OnEvent(Event::Home);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0u);
 
-  input.OnEvent(Event::Character('-'));
-  EXPECT_EQ(input.content, L"-abc");
+  input->OnEvent(Event::Character('-'));
+  EXPECT_EQ(content, L"-abc");
 }
 
 TEST(InputTest, End) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
 
-  input.OnEvent(Event::ArrowLeft);
-  input.OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::ArrowLeft);
 
-  EXPECT_EQ(input.cursor_position, 1u);
-  input.OnEvent(Event::End);
-  EXPECT_EQ(input.cursor_position, 3u);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 1u);
+  input->OnEvent(Event::End);
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 3u);
 }
 
 TEST(InputTest, Delete) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
-  input.OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
+  input->OnEvent(Event::ArrowLeft);
 
-  EXPECT_EQ(input.content, L"abc");
-  EXPECT_EQ(input.cursor_position, 2u);
+  EXPECT_EQ(content, L"abc");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 
-  input.OnEvent(Event::Delete);
-  EXPECT_EQ(input.content, L"ab");
-  EXPECT_EQ(input.cursor_position, 2u);
+  input->OnEvent(Event::Delete);
+  EXPECT_EQ(content, L"ab");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 
-  input.OnEvent(Event::Delete);
-  EXPECT_EQ(input.content, L"ab");
-  EXPECT_EQ(input.cursor_position, 2u);
+  input->OnEvent(Event::Delete);
+  EXPECT_EQ(content, L"ab");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 }
 
 TEST(InputTest, Backspace) {
-  Input input;
+  std::wstring content;
+  std::wstring placeholder;
+  Component input = Input(&content, &placeholder);
 
-  input.OnEvent(Event::Character('a'));
-  input.OnEvent(Event::Character('b'));
-  input.OnEvent(Event::Character('c'));
-  input.OnEvent(Event::ArrowLeft);
+  input->OnEvent(Event::Character('a'));
+  input->OnEvent(Event::Character('b'));
+  input->OnEvent(Event::Character('c'));
+  input->OnEvent(Event::ArrowLeft);
 
-  EXPECT_EQ(input.content, L"abc");
-  EXPECT_EQ(input.cursor_position, 2u);
+  EXPECT_EQ(content, L"abc");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 2u);
 
-  input.OnEvent(Event::Backspace);
-  EXPECT_EQ(input.content, L"ac");
-  EXPECT_EQ(input.cursor_position, 1u);
+  input->OnEvent(Event::Backspace);
+  EXPECT_EQ(content, L"ac");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 1u);
 
-  input.OnEvent(Event::Backspace);
-  EXPECT_EQ(input.content, L"c");
-  EXPECT_EQ(input.cursor_position, 0u);
+  input->OnEvent(Event::Backspace);
+  EXPECT_EQ(content, L"c");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0u);
 
-  input.OnEvent(Event::Backspace);
-  EXPECT_EQ(input.content, L"c");
-  EXPECT_EQ(input.cursor_position, 0u);
+  input->OnEvent(Event::Backspace);
+  EXPECT_EQ(content, L"c");
+  EXPECT_EQ(InputBase::From(input)->cursor_position, 0u);
 }
+
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
diff --git a/src/ftxui/component/menu.cpp b/src/ftxui/component/menu.cpp
index 90b19878..59c3583c 100644
--- a/src/ftxui/component/menu.cpp
+++ b/src/ftxui/component/menu.cpp
@@ -1,23 +1,63 @@
+#include <stddef.h>            // for size_t
+#include <algorithm>           // for max, min
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for shared_ptr, allocator_traits<>::value_type
+#include <utility>             // for move
+
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowDown, Event::ArrowUp, Event::Return, Event::Tab, Event::TabReverse
 #include "ftxui/component/menu.hpp"
-
-#include <stddef.h>
-#include <algorithm>
-#include <memory>
-#include <utility>
-
-#include "ftxui/component/captured_mouse.hpp"
-#include "ftxui/component/mouse.hpp"
-#include "ftxui/component/screen_interactive.hpp"
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Released
+#include "ftxui/component/screen_interactive.hpp"  // for Component
 
 namespace ftxui {
 
-Element Menu::Render() {
+/// @brief A list of text. The focused element is selected.
+/// @param entries The list of entries in the menu.
+/// @param selected The index of the currently selected element.
+/// @ingroup component
+/// @see MenuBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// std::vector<std::wstring> entries = {
+///     L"entry 1",
+///     L"entry 2",
+///     L"entry 3",
+/// };
+/// int selected = 0;
+/// auto menu = Menu(&entries, &selected);
+/// screen.Loop(menu);
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// > entry 1
+///   entry 2
+///   entry 3
+/// ```
+Component Menu(const std::vector<std::wstring>* entries, int* selected) {
+  return Make<MenuBase>(entries, selected);
+}
+
+// static
+MenuBase* MenuBase::From(Component component) {
+  return static_cast<MenuBase*>(component.get());
+}
+
+MenuBase::MenuBase(const std::vector<std::wstring>* entries, int* selected)
+    : entries_(entries), selected_(selected) {}
+
+Element MenuBase::Render() {
   Elements elements;
   bool is_menu_focused = Focused();
-  boxes_.resize(entries.size());
-  for (size_t i = 0; i < entries.size(); ++i) {
+  boxes_.resize(entries_->size());
+  for (size_t i = 0; i < entries_->size(); ++i) {
     bool is_focused = (focused == int(i)) && is_menu_focused;
-    bool is_selected = (selected == int(i));
+    bool is_selected = (*selected_ == int(i));
 
     auto style = is_selected
                      ? (is_focused ? selected_focused_style : selected_style)
@@ -26,13 +66,13 @@ Element Menu::Render() {
                             : is_menu_focused ? focus
                                               : select;
     auto icon = is_selected ? L"> " : L"  ";
-    elements.push_back(text(icon + entries[i]) | style | focus_management |
+    elements.push_back(text(icon + entries_->at(i)) | style | focus_management |
                        reflect(boxes_[i]));
   }
   return vbox(std::move(elements));
 }
 
-bool Menu::OnEvent(Event event) {
+bool MenuBase::OnEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   if (event.is_mouse())
@@ -41,20 +81,20 @@ bool Menu::OnEvent(Event event) {
   if (!Focused())
     return false;
 
-  int old_selected = selected;
+  int old_selected = *selected_;
   if (event == Event::ArrowUp || event == Event::Character('k'))
-    selected--;
+    (*selected_)--;
   if (event == Event::ArrowDown || event == Event::Character('j'))
-    selected++;
-  if (event == Event::Tab && entries.size())
-    selected = (selected + 1) % entries.size();
-  if (event == Event::TabReverse && entries.size())
-    selected = (selected + entries.size() - 1) % entries.size();
+    (*selected_)++;
+  if (event == Event::Tab && entries_->size())
+    *selected_ = (*selected_ + 1) % entries_->size();
+  if (event == Event::TabReverse && entries_->size())
+    *selected_ = (*selected_ + entries_->size() - 1) % entries_->size();
 
-  selected = std::max(0, std::min(int(entries.size()) - 1, selected));
+  *selected_ = std::max(0, std::min(int(entries_->size()) - 1, *selected_));
 
-  if (selected != old_selected) {
-    focused = selected;
+  if (*selected_ != old_selected) {
+    focused = *selected_;
     on_change();
     return true;
   }
@@ -67,7 +107,7 @@ bool Menu::OnEvent(Event event) {
   return false;
 }
 
-bool Menu::OnMouseEvent(Event event) {
+bool MenuBase::OnMouseEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   for (int i = 0; i < boxes_.size(); ++i) {
@@ -78,8 +118,8 @@ bool Menu::OnMouseEvent(Event event) {
     focused = i;
     if (event.mouse().button == Mouse::Left &&
         event.mouse().motion == Mouse::Released) {
-      if (selected != i) {
-        selected = i;
+      if (*selected_ != i) {
+        *selected_ = i;
         on_change();
       }
       return true;
diff --git a/src/ftxui/component/radiobox.cpp b/src/ftxui/component/radiobox.cpp
index 4d6c00a2..2be694bb 100644
--- a/src/ftxui/component/radiobox.cpp
+++ b/src/ftxui/component/radiobox.cpp
@@ -1,36 +1,76 @@
+#include <stddef.h>    // for size_t
+#include <algorithm>   // for max, min
+#include <functional>  // for function
+#include <memory>      // for shared_ptr, allocator_traits<>::value_type
+#include <utility>     // for move
+
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowDown, Event::ArrowUp, Event::Return, Event::Tab, Event::TabReverse
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed
 #include "ftxui/component/radiobox.hpp"
-
-#include <stddef.h>
-#include <algorithm>
-#include <functional>
-#include <memory>
-#include <utility>
-
-#include "ftxui/component/captured_mouse.hpp"
-#include "ftxui/component/mouse.hpp"
-#include "ftxui/component/screen_interactive.hpp"
+#include "ftxui/component/screen_interactive.hpp"  // for Component
 
 namespace ftxui {
 
-Element RadioBox::Render() {
+/// @brief A list of element, where only one can be selected.
+/// @param entries The list of entries in the list.
+/// @param selected The index of the currently selected element.
+/// @ingroup component
+/// @see RadioboxBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// std::vector<std::wstring> entries = {
+///     L"entry 1",
+///     L"entry 2",
+///     L"entry 3",
+/// };
+/// int selected = 0;
+/// auto menu = Radiobox(&entries, &selected);
+/// screen.Loop(menu);
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// ◉ entry 1
+/// ○ entry 2
+/// ○ entry 3
+/// ```
+Component Radiobox(const std::vector<std::wstring>* entries, int* selected) {
+  return Make<RadioboxBase>(entries, selected);
+}
+
+// static
+RadioboxBase* RadioboxBase::From(Component component) {
+  return static_cast<RadioboxBase*>(component.get());
+}
+
+RadioboxBase::RadioboxBase(const std::vector<std::wstring>* entries,
+                           int* selected_)
+    : entries_(entries), selected_(selected_) {}
+
+Element RadioboxBase::Render() {
   std::vector<Element> elements;
   bool is_focused = Focused();
-  boxes_.resize(entries.size());
-  for (size_t i = 0; i < entries.size(); ++i) {
+  boxes_.resize(entries_->size());
+  for (size_t i = 0; i < entries_->size(); ++i) {
     auto style =
         (focused == int(i) && is_focused) ? focused_style : unfocused_style;
     auto focus_management = (focused != int(i)) ? nothing
                             : is_focused        ? focus
                                                 : select;
 
-    const std::wstring& symbol = selected == int(i) ? checked : unchecked;
-    elements.push_back(hbox(text(symbol), text(entries[i]) | style) |
+    const std::wstring& symbol = *selected_ == int(i) ? checked : unchecked;
+    elements.push_back(hbox(text(symbol), text(entries_->at(i)) | style) |
                        focus_management | reflect(boxes_[i]));
   }
   return vbox(std::move(elements));
 }
 
-bool RadioBox::OnEvent(Event event) {
+bool RadioboxBase::OnEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   if (event.is_mouse())
@@ -44,12 +84,12 @@ bool RadioBox::OnEvent(Event event) {
     new_focused--;
   if (event == Event::ArrowDown || event == Event::Character('j'))
     new_focused++;
-  if (event == Event::Tab && entries.size())
-    new_focused = (new_focused + 1) % entries.size();
-  if (event == Event::TabReverse && entries.size())
-    new_focused = (new_focused + entries.size() - 1) % entries.size();
+  if (event == Event::Tab && entries_->size())
+    new_focused = (new_focused + 1) % entries_->size();
+  if (event == Event::TabReverse && entries_->size())
+    new_focused = (new_focused + entries_->size() - 1) % entries_->size();
 
-  new_focused = std::max(0, std::min(int(entries.size()) - 1, new_focused));
+  new_focused = std::max(0, std::min(int(entries_->size()) - 1, new_focused));
 
   if (focused != new_focused) {
     focused = new_focused;
@@ -57,14 +97,14 @@ bool RadioBox::OnEvent(Event event) {
   }
 
   if (event == Event::Character(' ') || event == Event::Return) {
-    selected = focused;
+    *selected_ = focused;
     on_change();
   }
 
   return false;
 }
 
-bool RadioBox::OnMouseEvent(Event event) {
+bool RadioboxBase::OnMouseEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   for (int i = 0; i < boxes_.size(); ++i) {
@@ -78,8 +118,8 @@ bool RadioBox::OnMouseEvent(Event event) {
         event.mouse().motion == Mouse::Pressed) {
       cursor_position = i;
       TakeFocus();
-      if (selected != i) {
-        selected = i;
+      if (*selected_ != i) {
+        *selected_ = i;
         on_change();
       }
       return true;
diff --git a/src/ftxui/component/radiobox_test.cpp b/src/ftxui/component/radiobox_test.cpp
index 845dac0f..4e9a7fe4 100644
--- a/src/ftxui/component/radiobox_test.cpp
+++ b/src/ftxui/component/radiobox_test.cpp
@@ -1,7 +1,8 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
+#include <memory>                   // for __shared_ptr_access, shared_ptr
 
-#include "ftxui/component/event.hpp"  // for Event, Event::ArrowDown, Event::ArrowUp, Event::Tab, Event::TabReverse
+#include "ftxui/component/event.hpp"  // for Event, Event::Return, Event::ArrowDown, Event::ArrowUp, Event::Tab, Event::TabReverse
 #include "ftxui/component/mouse.hpp"  // for ftxui
 #include "ftxui/component/radiobox.hpp"
 #include "gtest/gtest_pred_impl.h"  // for EXPECT_EQ, Test, TEST
@@ -9,76 +10,105 @@
 using namespace ftxui;
 
 TEST(RadioboxTest, Navigation) {
-  RadioBox radiobox;
-  radiobox.entries = {L"1", L"2", L"3"};
+  int selected = 0;
+  std::vector<std::wstring> entries = {L"1", L"2", L"3"};
+  auto radiobox = Radiobox(&entries, &selected);
 
   // With arrow key.
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 0);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
 
   // With vim like characters.
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::Character('j'));
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::Character('j'));
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::Character('j'));
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::Character('k'));
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::Character('k'));
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::Character('k'));
-  EXPECT_EQ(radiobox.focused, 0);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::Character('j'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::Character('j'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::Character('j'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::Character('k'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::Character('k'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::Character('k'));
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
 
   // With more entries
-  radiobox.entries = {L"1", L"2", L"3"};
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::ArrowDown);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::ArrowUp);
-  EXPECT_EQ(radiobox.focused, 0);
+  entries = {L"1", L"2", L"3"};
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::ArrowDown);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::ArrowUp);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
 
   // With tab.
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::Tab);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::Tab);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::Tab);
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::Tab);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::Tab);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::TabReverse);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::TabReverse);
-  EXPECT_EQ(radiobox.focused, 0);
-  radiobox.OnEvent(Event::TabReverse);
-  EXPECT_EQ(radiobox.focused, 2);
-  radiobox.OnEvent(Event::TabReverse);
-  EXPECT_EQ(radiobox.focused, 1);
-  radiobox.OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::Tab);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::Tab);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::Tab);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::Tab);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::Tab);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::TabReverse);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::TabReverse);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 0);
+  radiobox->OnEvent(Event::TabReverse);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 2);
+  radiobox->OnEvent(Event::TabReverse);
+  radiobox->OnEvent(Event::Return);
+  EXPECT_EQ(selected, 1);
+  radiobox->OnEvent(Event::TabReverse);
+  radiobox->OnEvent(Event::Return);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/src/ftxui/component/screen_interactive.cpp b/src/ftxui/component/screen_interactive.cpp
index c02dccf7..21fa886d 100644
--- a/src/ftxui/component/screen_interactive.cpp
+++ b/src/ftxui/component/screen_interactive.cpp
@@ -1,24 +1,23 @@
-#include "ftxui/component/screen_interactive.hpp"
-
 #include <stdio.h>    // for fileno, stdin
 #include <algorithm>  // for copy, max, min
-#include <csignal>    // for signal, SIGINT
+#include <csignal>    // for signal, SIGINT, SIGWINCH
 #include <cstdlib>    // for exit, NULL
-#include <iostream>   // for cout, ostream
-#include <stack>      // for stack
-#include <thread>     // for thread
-#include <utility>    // for move
-#include <vector>     // for vector
+#include <iostream>  // for cout, ostream, basic_ostream, operator<<, endl, flush
+#include <stack>     // for stack
+#include <thread>    // for thread
+#include <utility>   // for move
+#include <vector>    // for vector
 
-#include "ftxui/component/captured_mouse.hpp"         // for CapturedMouse
-#include "ftxui/component/component.hpp"              // for Component
-#include "ftxui/component/event.hpp"                  // for Event
-#include "ftxui/component/mouse.hpp"                  // for Mouse
-#include "ftxui/component/receiver.hpp"               // for ReceiverImpl
-#include "ftxui/component/terminal_input_parser.hpp"  // for TerminalInputPa...
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse, CapturedMouseInterface
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/event.hpp"           // for Event
+#include "ftxui/component/mouse.hpp"           // for Mouse
+#include "ftxui/component/receiver.hpp"  // for ReceiverImpl, SenderImpl, MakeReceiver
+#include "ftxui/component/screen_interactive.hpp"
+#include "ftxui/component/terminal_input_parser.hpp"  // for TerminalInputParser
 #include "ftxui/dom/node.hpp"                         // for Node, Render
 #include "ftxui/dom/requirement.hpp"                  // for Requirement
-#include "ftxui/screen/terminal.hpp"                  // for Terminal::Dimen...
+#include "ftxui/screen/terminal.hpp"  // for Terminal::Dimensions, Terminal
 
 #if defined(_WIN32)
 #define DEFINE_CONSOLEV2_PROPERTIES
@@ -31,9 +30,9 @@
 #error Must be compiled in UNICODE mode
 #endif
 #else
-#include <sys/select.h>  // for select, FD_ISSET
-#include <termios.h>     // for tcsetattr, tcge...
-#include <unistd.h>      // for STDIN_FILENO, read
+#include <sys/select.h>  // for select, FD_ISSET, FD_SET, FD_ZERO, fd_set
+#include <termios.h>  // for tcsetattr, termios, tcgetattr, TCSANOW, cc_t, ECHO, ICANON, VMIN, VTIME
+#include <unistd.h>  // for STDIN_FILENO, read
 #endif
 
 // Quick exit is missing in standard CLang headers
@@ -110,7 +109,7 @@ void EventListener(std::atomic<bool>* quit, Sender<Event> out) {
 
   char c;
   while (!*quit) {
-    while(read(STDIN_FILENO, &c, 1), c)
+    while (read(STDIN_FILENO, &c, 1), c)
       parser.Add(c);
 
     emscripten_sleep(1);
@@ -278,7 +277,7 @@ CapturedMouse ScreenInteractive::CaptureMouse() {
       [this] { mouse_captured = false; });
 }
 
-void ScreenInteractive::Loop(Component* component) {
+void ScreenInteractive::Loop(Component component) {
   // Install a SIGINT handler and restore the old handler on exit.
   auto old_sigint_handler = std::signal(SIGINT, OnExit);
   on_exit_functions.push(
@@ -417,7 +416,7 @@ void ScreenInteractive::Loop(Component* component) {
   OnExit(0);
 }
 
-void ScreenInteractive::Draw(Component* component) {
+void ScreenInteractive::Draw(Component component) {
   auto document = component->Render();
   int dimx = 0;
   int dimy = 0;
diff --git a/src/ftxui/component/slider.cpp b/src/ftxui/component/slider.cpp
index 122e523b..8dbd5385 100644
--- a/src/ftxui/component/slider.cpp
+++ b/src/ftxui/component/slider.cpp
@@ -1,21 +1,22 @@
-#include "ftxui/component/slider.hpp"
+#include <string>   // for allocator, wstring
+#include <utility>  // for move
 
-#include <memory>
-#include <utility>
-
-#include "ftxui/component/captured_mouse.hpp"
-#include "ftxui/component/mouse.hpp"
-#include "ftxui/component/screen_interactive.hpp"
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/color.hpp"
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
+#include "ftxui/component/component.hpp"       // for Make, Slider
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed, Mouse::Released
+#include "ftxui/component/screen_interactive.hpp"  // for Component
+#include "ftxui/dom/elements.hpp"  // for Element, text, color, operator|, xflex, gauge, dim, hbox, reflect, underlined, vcenter
+#include "ftxui/screen/box.hpp"    // for Box
+#include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::GrayLight
 
 namespace ftxui {
 
 template <class T>
-class SliderImpl : public Component {
+class SliderBase : public ComponentBase {
  public:
-  SliderImpl(std::wstring label, T* value, T min, T max, T increment)
+  SliderBase(std::wstring label, T* value, T min, T max, T increment)
       : label_(label),
         value_(value),
         min_(min),
@@ -53,7 +54,7 @@ class SliderImpl : public Component {
       return true;
     }
 
-    return Component::OnEvent(event);
+    return ComponentBase::OnEvent(event);
   }
 
   bool OnMouseEvent(Event event) {
@@ -62,8 +63,7 @@ class SliderImpl : public Component {
       return true;
     }
 
-    if (box_.Contain(event.mouse().x, event.mouse().y) &&
-        CaptureMouse(event)) {
+    if (box_.Contain(event.mouse().x, event.mouse().y) && CaptureMouse(event)) {
       TakeFocus();
     }
 
@@ -94,23 +94,44 @@ class SliderImpl : public Component {
   CapturedMouse captured_mouse_;
 };
 
+/// @brief An horizontal slider.
+/// @param label The name of the slider.
+/// @param value The current value of the slider.
+/// @param min The minimum value.
+/// @param max The maximum value.
+/// @param increment The increment when used by the cursor.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// int value = 50;
+/// auto slider = Slider(L"Value:", &value, 0, 100, 1);
+/// screen.Loop(slider);
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// Value:[██████████████████████████                          ]
+/// ```
 template <class T>
-ComponentPtr Slider(std::wstring label, T* value, T min, T max, T increment) {
-  return std::make_unique<SliderImpl<T>>(std::move(label), value, min, max,
-                                         increment);
+Component Slider(std::wstring label, T* value, T min, T max, T increment) {
+  return Make<SliderBase<T>>(std::move(label), value, min, max, increment);
 }
 
-template ComponentPtr Slider(std::wstring label,
-                             int* value,
-                             int min,
-                             int max,
-                             int increment);
+template Component Slider(std::wstring label,
+                          int* value,
+                          int min,
+                          int max,
+                          int increment);
 
-template ComponentPtr Slider(std::wstring label,
-                             float* value,
-                             float min,
-                             float max,
-                             float increment);
+template Component Slider(std::wstring label,
+                          float* value,
+                          float min,
+                          float max,
+                          float increment);
 
 }  // namespace ftxui
 
diff --git a/src/ftxui/component/toggle.cpp b/src/ftxui/component/toggle.cpp
index ca064617..75c87869 100644
--- a/src/ftxui/component/toggle.cpp
+++ b/src/ftxui/component/toggle.cpp
@@ -1,26 +1,38 @@
 #include <stddef.h>   // for size_t
 #include <algorithm>  // for max, min
-#include <memory>     // for shared_ptr, alloca...
+#include <memory>     // for shared_ptr, allocator_traits<>::value_type
 #include <utility>    // for move
 
-#include "ftxui/component/captured_mouse.hpp"      // for CapturedMouse
-#include "ftxui/component/mouse.hpp"               // for Mouse, Mouse::Left
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Return, Event::Tab, Event::TabReverse
+#include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed
 #include "ftxui/component/toggle.hpp"
 
 namespace ftxui {
 
-Element Toggle::Render() {
+Component Toggle(const std::vector<std::wstring>* entries, int* selected) {
+  return Make<ToggleBase>(entries, selected);
+}
+
+// static
+ToggleBase* ToggleBase::From(Component component) {
+  return static_cast<ToggleBase*>(component.get());
+}
+
+ToggleBase::ToggleBase(const std::vector<std::wstring>* entries, int* selected)
+    : entries_(entries), selected_(selected) {}
+
+Element ToggleBase::Render() {
   Elements children;
   bool is_toggle_focused = Focused();
-  boxes_.resize(entries.size());
-  for (size_t i = 0; i < entries.size(); ++i) {
+  boxes_.resize(entries_->size());
+  for (size_t i = 0; i < entries_->size(); ++i) {
     // Separator.
     if (i != 0)
       children.push_back(separator());
 
     bool is_focused = (focused == int(i)) && is_toggle_focused;
-    bool is_selected = (selected == int(i));
+    bool is_selected = (*selected_ == int(i));
 
     auto style = is_selected
                      ? (is_focused ? selected_focused_style : selected_style)
@@ -28,30 +40,30 @@ Element Toggle::Render() {
     auto focus_management = !is_selected        ? nothing
                             : is_toggle_focused ? focus
                                                 : select;
-    children.push_back(text(entries[i]) | style | focus_management |
+    children.push_back(text(entries_->at(i)) | style | focus_management |
                        reflect(boxes_[i]));
   }
   return hbox(std::move(children));
 }
 
-bool Toggle::OnEvent(Event event) {
+bool ToggleBase::OnEvent(Event event) {
   if (event.is_mouse())
     return OnMouseEvent(event);
 
-  int old_selected = selected;
+  int old_selected = *selected_;
   if (event == Event::ArrowLeft || event == Event::Character('h'))
-    selected--;
+    (*selected_)--;
   if (event == Event::ArrowRight || event == Event::Character('l'))
-    selected++;
-  if (event == Event::Tab && entries.size())
-    selected = (selected + 1) % entries.size();
-  if (event == Event::TabReverse && entries.size())
-    selected = (selected + entries.size() - 1) % entries.size();
+    (*selected_)++;
+  if (event == Event::Tab && entries_->size())
+    *selected_ = (*selected_ + 1) % entries_->size();
+  if (event == Event::TabReverse && entries_->size())
+    *selected_ = (*selected_ + entries_->size() - 1) % entries_->size();
 
-  selected = std::max(0, std::min(int(entries.size()) - 1, selected));
+  *selected_ = std::max(0, std::min(int(entries_->size()) - 1, *selected_));
 
-  if (old_selected != selected) {
-    focused = selected;
+  if (old_selected != *selected_) {
+    focused = *selected_;
     on_change();
     return true;
   }
@@ -64,7 +76,7 @@ bool Toggle::OnEvent(Event event) {
   return false;
 }
 
-bool Toggle::OnMouseEvent(Event event) {
+bool ToggleBase::OnMouseEvent(Event event) {
   if (!CaptureMouse(event))
     return false;
   for (int i = 0; i < boxes_.size(); ++i) {
@@ -76,8 +88,8 @@ bool Toggle::OnMouseEvent(Event event) {
     if (event.mouse().button == Mouse::Left &&
         event.mouse().motion == Mouse::Pressed) {
       TakeFocus();
-      if (selected != i) {
-        selected = i;
+      if (*selected_ != i) {
+        *selected_ = i;
         on_change();
       }
       return true;
diff --git a/src/ftxui/component/toggle_test.cpp b/src/ftxui/component/toggle_test.cpp
index 4842d2c0..f25e84da 100644
--- a/src/ftxui/component/toggle_test.cpp
+++ b/src/ftxui/component/toggle_test.cpp
@@ -1,5 +1,6 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
+#include <memory>                   // for __shared_ptr_access, shared_ptr
 
 #include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Return, Event::Tab, Event::TabReverse
 #include "ftxui/component/mouse.hpp"  // for ftxui
@@ -9,131 +10,136 @@
 using namespace ftxui;
 
 TEST(ToggleTest, leftRightArrow) {
-  Toggle toggle;
+  std::vector<std::wstring> entries = {L"On", L"Off"};
+  int selected = 0;
+  auto toggle = Toggle(&entries, &selected);
 
   // With arrow key.
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(toggle.selected, 0);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(selected, 0);
 
   // With vim like characters.
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::Character('l'));
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::Character('l'));
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::Character('h'));
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::Character('h'));
-  EXPECT_EQ(toggle.selected, 0);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::Character('l'));
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::Character('l'));
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::Character('h'));
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::Character('h'));
+  EXPECT_EQ(selected, 0);
 
   // With more entries
-  toggle.entries = {L"1", L"2", L"3"};
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(toggle.selected, 2);
-  toggle.OnEvent(Event::ArrowRight);
-  EXPECT_EQ(toggle.selected, 2);
-  toggle.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::ArrowLeft);
-  EXPECT_EQ(toggle.selected, 0);
+  entries = {L"1", L"2", L"3"};
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(selected, 2);
+  toggle->OnEvent(Event::ArrowRight);
+  EXPECT_EQ(selected, 2);
+  toggle->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::ArrowLeft);
+  EXPECT_EQ(selected, 0);
 }
 
 TEST(ToggleTest, Tab) {
-  Toggle toggle;
-  toggle.entries = {L"1", L"2", L"3"};
+  std::vector<std::wstring> entries = {L"1", L"2", L"3"};
+  int selected = 0;
+  auto toggle = Toggle(&entries, &selected);
 
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::Tab);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::Tab);
-  EXPECT_EQ(toggle.selected, 2);
-  toggle.OnEvent(Event::Tab);
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::Tab);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::Tab);
-  EXPECT_EQ(toggle.selected, 2);
-  toggle.OnEvent(Event::TabReverse);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::TabReverse);
-  EXPECT_EQ(toggle.selected, 0);
-  toggle.OnEvent(Event::TabReverse);
-  EXPECT_EQ(toggle.selected, 2);
-  toggle.OnEvent(Event::TabReverse);
-  EXPECT_EQ(toggle.selected, 1);
-  toggle.OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::Tab);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::Tab);
+  EXPECT_EQ(selected, 2);
+  toggle->OnEvent(Event::Tab);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::Tab);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::Tab);
+  EXPECT_EQ(selected, 2);
+  toggle->OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 0);
+  toggle->OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 2);
+  toggle->OnEvent(Event::TabReverse);
+  EXPECT_EQ(selected, 1);
+  toggle->OnEvent(Event::TabReverse);
 }
 
 TEST(ToggleTest, OnChange) {
-  Toggle toggle;
-  toggle.entries = {L"1", L"2", L"3"};
+  std::vector<std::wstring> entries = {L"1", L"2", L"3"};
+  int selected = 0;
+  auto toggle = Toggle(&entries, &selected);
 
   int counter = 0;
-  toggle.on_change = [&] { counter++; };
+  ToggleBase::From(toggle)->on_change = [&] { counter++; };
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowLeft));  // Reached far left.
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowLeft));  // Reached far left.
   EXPECT_EQ(counter, 0);
 
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowRight));  // [0] -> [1]
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowRight));  // [0] -> [1]
   EXPECT_EQ(counter, 1);
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowRight));  // [1] -> [2]
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowRight));  // [1] -> [2]
   EXPECT_EQ(counter, 2);
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowRight));  // Reached far right.
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowRight));  // Reached far right.
   EXPECT_EQ(counter, 2);
 
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowLeft));  // [2] -> [1]
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowLeft));  // [2] -> [1]
   EXPECT_EQ(counter, 3);
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowLeft));  // [1] -> [0]
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowLeft));  // [1] -> [0]
   EXPECT_EQ(counter, 4);
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowLeft));  // Reached far left.
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowLeft));  // Reached far left.
   EXPECT_EQ(counter, 4);
 }
 
 TEST(ToggleTest, OnEnter) {
-  Toggle toggle;
-  toggle.entries = {L"1", L"2", L"3"};
+  std::vector<std::wstring> entries = {L"1", L"2", L"3"};
+  int selected = 0;
+  auto toggle = Toggle(&entries, &selected);
 
   int counter = 0;
-  toggle.on_enter = [&] { counter++; };
+  ToggleBase::From(toggle)->on_enter = [&] { counter++; };
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowLeft));  // Reached far left.
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowLeft));  // Reached far left.
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 1);
 
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowRight));  // [0] -> [1]
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowRight));  // [0] -> [1]
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 2);
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowRight));  // [1] -> [2]
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowRight));  // [1] -> [2]
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 3);
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowRight));  // Reached far right.
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowRight));  // Reached far right.
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 4);
 
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowLeft));  // [2] -> [1]
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowLeft));  // [2] -> [1]
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 5);
-  EXPECT_TRUE(toggle.OnEvent(Event::ArrowLeft));  // [1] -> [0]
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_TRUE(toggle->OnEvent(Event::ArrowLeft));  // [1] -> [0]
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 6);
 
-  EXPECT_FALSE(toggle.OnEvent(Event::ArrowLeft));  // Reached far left.
-  EXPECT_TRUE(toggle.OnEvent(Event::Return));
+  EXPECT_FALSE(toggle->OnEvent(Event::ArrowLeft));  // Reached far left.
+  EXPECT_TRUE(toggle->OnEvent(Event::Return));
   EXPECT_EQ(counter, 7);
 }
 
diff --git a/src/ftxui/dom/blink.cpp b/src/ftxui/dom/blink.cpp
index 57a3a230..3622b1f0 100644
--- a/src/ftxui/dom/blink.cpp
+++ b/src/ftxui/dom/blink.cpp
@@ -1,10 +1,11 @@
-#include <memory>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"        // for Element, unpack, Elements, blink
+#include "ftxui/dom/node.hpp"            // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/bold.cpp b/src/ftxui/dom/bold.cpp
index 1d5c3c7b..05618602 100644
--- a/src/ftxui/dom/bold.cpp
+++ b/src/ftxui/dom/bold.cpp
@@ -1,10 +1,11 @@
-#include <memory>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"        // for Element, unpack, Elements, bold
+#include "ftxui/dom/node.hpp"            // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/border.cpp b/src/ftxui/dom/border.cpp
index a7ce81c5..f543498c 100644
--- a/src/ftxui/dom/border.cpp
+++ b/src/ftxui/dom/border.cpp
@@ -1,8 +1,9 @@
-#include <algorithm>  // for max
-#include <iterator>   // for begin, end
-#include <memory>     // for make_shared, __shared_ptr_access
-#include <utility>    // for move
-#include <vector>     // for vector
+#include <algorithm>           // for max
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <iterator>            // for begin, end
+#include <memory>              // for make_shared, __shared_ptr_access
+#include <utility>             // for move
+#include <vector>              // for vector
 
 #include "ftxui/dom/elements.hpp"  // for unpack, Element, Decorator, Elements, border, borderWith, window
 #include "ftxui/dom/node.hpp"         // for Node
diff --git a/src/ftxui/dom/clear_under.cpp b/src/ftxui/dom/clear_under.cpp
index 23fb36cb..e9ae80c1 100644
--- a/src/ftxui/dom/clear_under.cpp
+++ b/src/ftxui/dom/clear_under.cpp
@@ -1,10 +1,11 @@
-#include <memory>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, unpack, Elements, clear_under
+#include "ftxui/dom/node.hpp"      // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/color.cpp b/src/ftxui/dom/color.cpp
index 475d9786..465ad682 100644
--- a/src/ftxui/dom/color.cpp
+++ b/src/ftxui/dom/color.cpp
@@ -1,10 +1,11 @@
-#include <memory>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/color.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, unpack, Decorator, Elements, bgcolor, color
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/color.hpp"        // for Color
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/composite_decorator.cpp b/src/ftxui/dom/composite_decorator.cpp
index 007057cc..0ffc6402 100644
--- a/src/ftxui/dom/composite_decorator.cpp
+++ b/src/ftxui/dom/composite_decorator.cpp
@@ -1,5 +1,7 @@
 
-#include "ftxui/dom/elements.hpp"
+#include <utility>  // for move
+
+#include "ftxui/dom/elements.hpp"  // for Element, filler, operator|, hbox, flex_grow, vbox, xflex_grow, yflex_grow, align_right, center, hcenter, vcenter
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/dim.cpp b/src/ftxui/dom/dim.cpp
index 296ea1d7..a2e8d85b 100644
--- a/src/ftxui/dom/dim.cpp
+++ b/src/ftxui/dom/dim.cpp
@@ -1,10 +1,11 @@
-#include <memory>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"        // for Element, unpack, Elements, dim
+#include "ftxui/dom/node.hpp"            // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/flex.cpp b/src/ftxui/dom/flex.cpp
index 303481c4..b8aa282b 100644
--- a/src/ftxui/dom/flex.cpp
+++ b/src/ftxui/dom/flex.cpp
@@ -1,10 +1,12 @@
-#include <memory>
-#include <vector>
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for make_shared, __shared_ptr_access
+#include <utility>             // for move
+#include <vector>              // for vector
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/requirement.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, unpack, filler, flex, flex_grow, flex_shrink, notflex, xflex, xflex_grow, xflex_shrink, yflex, yflex_grow, yflex_shrink
+#include "ftxui/dom/node.hpp"      // for Node
+#include "ftxui/dom/requirement.hpp"  // for Requirement
+#include "ftxui/screen/box.hpp"       // for Box
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/frame.cpp b/src/ftxui/dom/frame.cpp
index 05f3ea92..9d4b2e57 100644
--- a/src/ftxui/dom/frame.cpp
+++ b/src/ftxui/dom/frame.cpp
@@ -1,7 +1,8 @@
-#include <algorithm>  // for max, min
-#include <memory>     // for make_shared, shared_ptr, __shared_ptr_access
-#include <utility>    // for move
-#include <vector>     // for vector
+#include <algorithm>           // for max, min
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>   // for make_shared, shared_ptr, __shared_ptr_access
+#include <utility>  // for move
+#include <vector>   // for vector
 
 #include "ftxui/dom/elements.hpp"  // for Element, unpack, focus, frame, select, xframe, yframe
 #include "ftxui/dom/node.hpp"  // for Node
diff --git a/src/ftxui/dom/gauge.cpp b/src/ftxui/dom/gauge.cpp
index fe45c4b6..d955d983 100644
--- a/src/ftxui/dom/gauge.cpp
+++ b/src/ftxui/dom/gauge.cpp
@@ -1,9 +1,10 @@
-#include <memory>
+#include <memory>  // for make_shared
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/requirement.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"     // for Element, gauge
+#include "ftxui/dom/node.hpp"         // for Node
+#include "ftxui/dom/requirement.hpp"  // for Requirement
+#include "ftxui/screen/box.hpp"       // for Box
+#include "ftxui/screen/screen.hpp"    // for Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/inverted.cpp b/src/ftxui/dom/inverted.cpp
index c8595463..c5624999 100644
--- a/src/ftxui/dom/inverted.cpp
+++ b/src/ftxui/dom/inverted.cpp
@@ -1,10 +1,11 @@
-#include <memory>
-#include <utility>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, unpack, Elements, inverted
+#include "ftxui/dom/node.hpp"      // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/node_decorator.cpp b/src/ftxui/dom/node_decorator.cpp
index b98c2c2a..d12e2df1 100644
--- a/src/ftxui/dom/node_decorator.cpp
+++ b/src/ftxui/dom/node_decorator.cpp
@@ -1,5 +1,6 @@
-#include <memory>  // for __shared_ptr_access
-#include <vector>  // for vector
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for __shared_ptr_access
+#include <vector>              // for vector
 
 #include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/requirement.hpp"  // for Requirement
diff --git a/src/ftxui/dom/reflect.cpp b/src/ftxui/dom/reflect.cpp
index 79998ad6..fa6167dc 100644
--- a/src/ftxui/dom/reflect.cpp
+++ b/src/ftxui/dom/reflect.cpp
@@ -1,11 +1,12 @@
-#include <memory>
-#include <utility>
-#include <vector>
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for make_shared, __shared_ptr_access
+#include <utility>             // for move
+#include <vector>              // for vector
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/dom/requirement.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/dom/elements.hpp"     // for Element, unpack, Decorator, reflect
+#include "ftxui/dom/node.hpp"         // for Node
+#include "ftxui/dom/requirement.hpp"  // for Requirement
+#include "ftxui/screen/box.hpp"       // for Box
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/separator.cpp b/src/ftxui/dom/separator.cpp
index 243249dc..0646f803 100644
--- a/src/ftxui/dom/separator.cpp
+++ b/src/ftxui/dom/separator.cpp
@@ -1,9 +1,10 @@
-#include <memory>
+#include <memory>  // for make_shared
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"     // for Element, separator
+#include "ftxui/dom/node.hpp"         // for Node
+#include "ftxui/dom/requirement.hpp"  // for Requirement
+#include "ftxui/screen/box.hpp"       // for Box
+#include "ftxui/screen/screen.hpp"    // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/size.cpp b/src/ftxui/dom/size.cpp
index f5621b68..2004b13f 100644
--- a/src/ftxui/dom/size.cpp
+++ b/src/ftxui/dom/size.cpp
@@ -1,8 +1,9 @@
-#include <stddef.h>   // for size_t
-#include <algorithm>  // for min, max
-#include <memory>     // for make_shared, __shared_ptr_access
-#include <utility>    // for move
-#include <vector>     // for vector
+#include <stddef.h>            // for size_t
+#include <algorithm>           // for min, max
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for make_shared, __shared_ptr_access
+#include <utility>             // for move
+#include <vector>              // for vector
 
 #include "ftxui/dom/elements.hpp"  // for Constraint, Direction, EQUAL, GREATER_THAN, LESS_THAN, WIDTH, unpack, Decorator, Element, size
 #include "ftxui/dom/node.hpp"      // for Node
diff --git a/src/ftxui/dom/spinner.cpp b/src/ftxui/dom/spinner.cpp
index e415acce..2510edd9 100644
--- a/src/ftxui/dom/spinner.cpp
+++ b/src/ftxui/dom/spinner.cpp
@@ -1,9 +1,11 @@
-#include <stddef.h>
-#include <memory>
-#include <string>
-#include <vector>
+#include <stddef.h>            // for size_t
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <memory>              // for allocator, allocator_traits<>::value_type
+#include <string>              // for basic_string, wstring
+#include <utility>             // for move
+#include <vector>              // for vector
 
-#include "ftxui/dom/elements.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, gauge, text, vbox, spinner
 
 namespace ftxui {
 
diff --git a/src/ftxui/dom/text_test.cpp b/src/ftxui/dom/text_test.cpp
index a1a55518..92f4b231 100644
--- a/src/ftxui/dom/text_test.cpp
+++ b/src/ftxui/dom/text_test.cpp
@@ -1,11 +1,12 @@
-#include <gtest/gtest-message.h>    // for Message
-#include <gtest/gtest-test-part.h>  // for TestPartResult
+#include <gtest/gtest-message.h>  // for Message
+#include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
 #include <memory>                   // for allocator
 
 #include "ftxui/dom/elements.hpp"   // for text, Element, operator|, border
+#include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/box.hpp"     // for ftxui
 #include "ftxui/screen/screen.hpp"  // for Screen
-#include "gtest/gtest_pred_impl.h"  // for Test, SuiteApiResolver, EXPECT_EQ
+#include "gtest/gtest_pred_impl.h"  // for Test, EXPECT_EQ, TEST
 
 using namespace ftxui;
 
diff --git a/src/ftxui/dom/underlined.cpp b/src/ftxui/dom/underlined.cpp
index 7a3a50f1..09e82f74 100644
--- a/src/ftxui/dom/underlined.cpp
+++ b/src/ftxui/dom/underlined.cpp
@@ -1,10 +1,11 @@
-#include <memory>
-#include <utility>
+#include <memory>   // for make_shared
+#include <utility>  // for move
 
-#include "ftxui/dom/elements.hpp"
-#include "ftxui/dom/node_decorator.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/screen.hpp"
+#include "ftxui/dom/elements.hpp"  // for Element, unpack, Elements, underlined
+#include "ftxui/dom/node.hpp"      // for Node
+#include "ftxui/dom/node_decorator.hpp"  // for NodeDecorator
+#include "ftxui/screen/box.hpp"          // for Box
+#include "ftxui/screen/screen.hpp"       // for Pixel, Screen
 
 namespace ftxui {
 
diff --git a/src/ftxui/screen/screen.cpp b/src/ftxui/screen/screen.cpp
index 5a3dbd19..4a1a0223 100644
--- a/src/ftxui/screen/screen.cpp
+++ b/src/ftxui/screen/screen.cpp
@@ -1,4 +1,5 @@
-#include <algorithm>  // for min
+#include <algorithm>           // for min
+#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
 #include <iostream>  // for operator<<, basic_ostream, wstringstream, stringstream, flush, cout, ostream
 #include <sstream>   // IWYU pragma: keep
 
diff --git a/tools/license_headers.cpp b/tools/license_headers.cpp
index e7e7258f..6c0a379e 100644
--- a/tools/license_headers.cpp
+++ b/tools/license_headers.cpp
@@ -1,4 +1,4 @@
 
-// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.

From c9aa1805eb718e607197268c03a8de1a020fece5 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Thu, 13 May 2021 11:44:47 +0200
Subject: [PATCH 2/8] Add the Renderer component.

---
 CMakeLists.txt                           |   1 +
 examples/component/button.cpp            |  39 ++-
 examples/component/checkbox.cpp          |  12 +-
 examples/component/checkbox_in_frame.cpp |  57 ++--
 examples/component/gallery.cpp           | 162 ++++++------
 examples/component/homescreen.cpp        | 324 +++++++++++------------
 examples/component/slider_rgb.cpp        |  83 ++++++
 include/ftxui/component/component.hpp    |   2 +
 src/ftxui/component/renderer.cpp         |  44 +++
 9 files changed, 400 insertions(+), 324 deletions(-)
 create mode 100644 examples/component/slider_rgb.cpp
 create mode 100644 src/ftxui/component/renderer.cpp

diff --git a/CMakeLists.txt b/CMakeLists.txt
index e9f9bd9f..9af4e371 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -99,6 +99,7 @@ add_library(component
   src/ftxui/component/menu.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/radiobox.cpp
+  src/ftxui/component/renderer.cpp
   src/ftxui/component/screen_interactive.cpp
   src/ftxui/component/slider.cpp
   src/ftxui/component/terminal_input_parser.cpp
diff --git a/examples/component/button.cpp b/examples/component/button.cpp
index 2716d5c5..6382890f 100644
--- a/examples/component/button.cpp
+++ b/examples/component/button.cpp
@@ -1,43 +1,36 @@
 #include <string>  // for operator+, to_wstring, allocator, wstring
 
-#include "ftxui/component/captured_mouse.hpp"      // for ftxui
 #include "ftxui/component/component.hpp"           // for Button, Make
-#include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/container.hpp"           // for Container
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for separator, Element, gauge, text, operator|, vbox, border
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
-  std::wstring label_add = L"Increase";
-  std::wstring label_rm = L"Decrease";
-  int value_ = 50;
+int main(int argc, const char* argv[]) {
+  int value = 50;
+  std::wstring label_dec = L"decrease";
+  std::wstring label_inc = L"increase";
 
- public:
-  MyComponent() {
-    Add(Container::Horizontal({
-        Button(&label_rm, [&] { value_--; }),
-        Button(&label_add, [&] { value_++; }),
-    }));
-  }
+  // The tree of components. This defines how to navigate using the keyboard.
+  auto buttons = Container::Horizontal({
+      Button(&label_dec, [&] { value--; }),
+      Button(&label_inc, [&] { value++; }),
+  });
 
-  Element Render() override {
+  // Modify the way to render them on screen:
+  auto component = Renderer(buttons, [&] {
     return vbox({
-               text(L"Value = " + std::to_wstring(value_)),
+               text(L"value = " + std::to_wstring(value)),
                separator(),
-               gauge(value_ * 0.01f),
+               gauge(value * 0.01f),
                separator(),
-               ComponentBase::Render(),
+               buttons->Render(),
            }) |
            border;
-  }
-};
+  });
 
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(component);
   return 0;
 }
 
diff --git a/examples/component/checkbox.cpp b/examples/component/checkbox.cpp
index 4eb51b11..cd2637eb 100644
--- a/examples/component/checkbox.cpp
+++ b/examples/component/checkbox.cpp
@@ -6,8 +6,7 @@
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
+int main(int argc, const char* argv[]) {
   std::wstring build_examples_label = L"Build examples";
   std::wstring build_tests_label = L"Build tests";
   std::wstring use_webassembly_label = L"Use WebAssembly";
@@ -16,19 +15,14 @@ class MyComponent : public ComponentBase {
   bool build_tests_state = false;
   bool use_webassembly_state = true;
 
-  Component container = Container::Vertical({
+  auto component = Container::Vertical({
       Checkbox(&build_examples_label, &build_examples_state),
       Checkbox(&build_tests_label, &build_tests_state),
       Checkbox(&use_webassembly_label, &use_webassembly_state),
   });
 
- public:
-  MyComponent() { Add(container); }
-};
-
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(component);
   return 0;
 }
 
diff --git a/examples/component/checkbox_in_frame.cpp b/examples/component/checkbox_in_frame.cpp
index 1af542b7..75b30dee 100644
--- a/examples/component/checkbox_in_frame.cpp
+++ b/examples/component/checkbox_in_frame.cpp
@@ -1,9 +1,7 @@
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
 #include <memory>  // for unique_ptr, make_unique, __shared_ptr_access
 #include <string>  // for operator+, wstring
 #include <vector>  // for vector
 
-#include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component.hpp"       // for Checkbox, Make
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/component/container.hpp"       // for Container
@@ -13,49 +11,28 @@
 
 using namespace ftxui;
 
-struct CheckboxAndState {
+struct CheckboxState {
   std::wstring label;
-  bool state;
-  Component component;
-};
-
-std::unique_ptr<CheckboxAndState> MakeCheckbox(std::wstring label) {
-  auto out = std::make_unique<CheckboxAndState>();
-  out->label = label;
-  out->state = false;
-  out->component = Checkbox(&out->label, &out->state);
-  return out;
-}
-
-class MyComponent : public ComponentBase {
- public:
-  MyComponent() {
-    Add(container);
-    checkbox.resize(30);
-    for (int i = 0; i < checkbox.size(); ++i) {
-      checkbox[i] = MakeCheckbox(L"CheckBox " + to_wstring(i));
-      container->Add(checkbox[i]->component);
-    }
-  }
-
-  // clang-format off
-  Element Render() override {
-    Elements content;
-    return vbox(container->Render())
-      | frame
-      | size(HEIGHT, LESS_THAN, 10)
-      | border;
-  }
-
- private:
-  std::vector<std::unique_ptr<CheckboxAndState>> checkbox;
-  Component container = Container::Vertical();
+  bool checked;
 };
 
 int main(int argc, const char* argv[]) {
+  int size = 30;
+  std::vector<CheckboxState> states(size);
+  auto container = Container::Vertical({});
+  for(int i = 0; i<size; ++i) {
+    states[i].checked = false;
+    states[i].label = L"Checkbox " + to_wstring(i);
+    container->Add(Checkbox(&states[i].label, &states[i].checked));
+  }
+
+  auto component = Renderer(container, [&] {
+    return container->Render() | frame | ftxui::size(HEIGHT, LESS_THAN, 10) |
+           border;
+  });
+
   auto screen = ScreenInteractive::FitComponent();
-  auto my_component = Make<MyComponent>();
-  screen.Loop(my_component);
+  screen.Loop(component);
 
   return 0;
 }
diff --git a/examples/component/gallery.cpp b/examples/component/gallery.cpp
index 329a7ec7..1d3564e8 100644
--- a/examples/component/gallery.cpp
+++ b/examples/component/gallery.cpp
@@ -12,111 +12,117 @@
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
-  const std::vector<std::wstring> menu_entries_ = {
+// Display a component nicely with a title on the left.
+Component Wrap(std::wstring name, Component component) {
+  return Renderer(component, [name, component] {
+    return hbox({
+               text(name) | size(WIDTH, EQUAL, 8),
+               separator(),
+               component->Render() | xflex,
+           }) |
+           xflex;
+  });
+}
+
+int main(int argc, const char* argv[]) {
+  auto screen = ScreenInteractive::FitComponent();
+
+  // -- Menu ----------------------------------------------------------------------
+  const std::vector<std::wstring> menu_entries = {
       L"Menu 1",
       L"Menu 2",
       L"Menu 3",
       L"Menu 4",
   };
-  int menu_selected_ = 0;
-  Component menu_ = Menu(&menu_entries_, &menu_selected_);
+  int menu_selected = 0;
+  auto menu = Menu(&menu_entries, &menu_selected);
+  menu = Wrap(L"Menu", menu);
 
-  int toggle_selected_ = 0;
-  std::vector<std::wstring> toggle_entries_ = {
+  // -- Toggle------------------------------------------------------------------
+  int toggle_selected = 0;
+  std::vector<std::wstring> toggle_entries = {
       L"Toggle_1",
       L"Toggle_2",
   };
-  Component toggle_ = Toggle(&toggle_entries_, &toggle_selected_);
+  auto toggle = Toggle(&toggle_entries, &toggle_selected);
+  toggle = Wrap(L"Toggle", toggle);
 
-  std::wstring checkbox_1_label_ = L"checkbox1";
-  std::wstring checkbox_2_label_ = L"checkbox2";
-  bool checkbox_1_selected_ = false;
-  bool checkbox_2_selected_ = false;
+  // -- Checkbox ---------------------------------------------------------------
+  std::wstring checkbox_1_label = L"checkbox1";
+  std::wstring checkbox_2_label = L"checkbox2";
+  bool checkbox_1_selected = false;
+  bool checkbox_2_selected = false;
 
-  Component checkbox_container_ = Container::Vertical({
-      Checkbox(&checkbox_1_label_, &checkbox_1_selected_),
-      Checkbox(&checkbox_2_label_, &checkbox_2_selected_),
+  auto checkboxes = Container::Vertical({
+      Checkbox(&checkbox_1_label, &checkbox_1_selected),
+      Checkbox(&checkbox_2_label, &checkbox_2_selected),
   });
+  checkboxes = Wrap(L"Checkbox", checkboxes);
 
-  int radiobox_selected_ = 0;
-  std::vector<std::wstring> radiobox_entries_ = {
+  // -- Radiobox ---------------------------------------------------------------
+  int radiobox_selected = 0;
+  std::vector<std::wstring> radiobox_entries = {
       L"Radiobox 1",
       L"Radiobox 2",
       L"Radiobox 3",
       L"Radiobox 4",
   };
-  Component radiobox_ = Radiobox(&radiobox_entries_, &radiobox_selected_);
+  auto radiobox = Radiobox(&radiobox_entries, &radiobox_selected);
+  radiobox = Wrap(L"Radiobox", radiobox);
 
-  std::wstring input_label_;
-  std::wstring input_placeholder_ = L"input";
-  Component input_ = Input(&input_label_, &input_placeholder_);
+  // -- Input ------------------------------------------------------------------
+  std::wstring input_label;
+  std::wstring input_placeholder = L"input";
+  auto input = Input(&input_label, &input_placeholder);
+  input = Wrap(L"Input", input);
 
-  std::wstring button_label_ = L"Quit";
+  // -- Button -----------------------------------------------------------------
+  std::wstring button_label = L"Quit";
   std::function<void()> on_button_clicked_;
-  Component button_ = Button(&button_label_, [this] { on_button_clicked_(); });
+  auto button = Button(&button_label, screen.ExitLoopClosure());
+  button = Wrap(L"Button", button);
 
-  int slider_value_1_ = 12;
-  int slider_value_2_ = 56;
-  int slider_value_3_ = 128;
-  Component slider_container_ = Container::Vertical({
-      Slider(L"R:", &slider_value_1_, 0, 256, 1),
-      Slider(L"G:", &slider_value_2_, 0, 256, 1),
-      Slider(L"B:", &slider_value_3_, 0, 256, 1),
+  // -- Slider -----------------------------------------------------------------
+  int slider_value_1 = 12;
+  int slider_value_2 = 56;
+  int slider_value_3 = 128;
+  auto sliders = Container::Vertical({
+      Slider(L"R:", &slider_value_1, 0, 256, 1),
+      Slider(L"G:", &slider_value_2, 0, 256, 1),
+      Slider(L"B:", &slider_value_3, 0, 256, 1),
+  });
+  sliders = Wrap(L"Slider", sliders);
+
+  // -- Layout -----------------------------------------------------------------
+  auto layout = Container::Vertical({
+      menu,
+      toggle,
+      checkboxes,
+      radiobox,
+      input,
+      sliders,
+      button,
   });
 
- public:
-  MyComponent(std::function<void(void)> on_quit) : on_quit_(on_quit) {
-    Add(Container::Vertical({
-        menu_,
-        toggle_,
-        checkbox_container_,
-        radiobox_,
-        input_,
-        slider_container_,
-        button_,
-    }));
-  }
-
-  Element Render(std::wstring name, Element element) {
-    return hbox({
-               text(name) | size(WIDTH, EQUAL, 8),
+  auto component = Renderer(layout, [&] {
+    return vbox({
+               menu->Render(),
                separator(),
-               element | xflex,
+               toggle->Render(),
+               separator(),
+               checkboxes->Render(),
+               separator(),
+               radiobox->Render(),
+               separator(),
+               input->Render(),
+               separator(),
+               sliders->Render(),
+               separator(),
+               button->Render(),
            }) |
-           xflex;
-  }
+           xflex | size(WIDTH, GREATER_THAN, 40) | border;
+  });
 
-  Element Render(std::wstring name, Component& component) {
-    return Render(name, component->Render());
-  }
-
-  Element Render() override {
-    return  //
-        vbox({
-            Render(L"menu", menu_),
-            separator(),
-            Render(L"toggle", toggle_),
-            separator(),
-            Render(L"checkbox", checkbox_container_),
-            separator(),
-            Render(L"radiobox", radiobox_),
-            separator(),
-            Render(L"input", input_) | size(WIDTH, LESS_THAN, 50),
-            separator(),
-            Render(L"slider", slider_container_),
-            separator(),
-            Render(L"button", button_),
-        }) |
-        xflex | size(WIDTH, GREATER_THAN, 40) | border;
-  }
-
-  std::function<void()> on_quit_;
-};
-
-int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::FitComponent();
-  auto component = Make<MyComponent>(screen.ExitLoopClosure());
   screen.Loop(component);
 
   return 0;
diff --git a/examples/component/homescreen.cpp b/examples/component/homescreen.cpp
index 407e11b5..876c3c22 100644
--- a/examples/component/homescreen.cpp
+++ b/examples/component/homescreen.cpp
@@ -20,32 +20,32 @@
 
 using namespace ftxui;
 
-int shift = 0;
-class Graph {
- public:
-  std::vector<int> operator()(int width, int height) {
-    std::vector<int> output(width);
-    for (int i = 0; i < width; ++i) {
-      float v = 0;
-      v += 0.1f * sin((i + shift) * 0.1f);
-      v += 0.2f * sin((i + shift + 10) * 0.15f);
-      v += 0.1f * sin((i + shift) * 0.03f);
-      v *= height;
-      v += 0.5f * height;
-      output[i] = (int)v;
+int main(int argc, const char* argv[]) {
+  auto screen = ScreenInteractive::Fullscreen();
+
+  int shift = 0;
+
+  class Graph {
+   public:
+    Graph(int* shift) : shift_(shift) {}
+    std::vector<int> operator()(int width, int height) {
+      std::vector<int> output(width);
+      for (int i = 0; i < width; ++i) {
+        float v = 0;
+        v += 0.1f * sin((i + *shift_) * 0.1f);
+        v += 0.2f * sin((i + *shift_ + 10) * 0.15f);
+        v += 0.1f * sin((i + *shift_) * 0.03f);
+        v *= height;
+        v += 0.5f * height;
+        output[i] = (int)v;
+      }
+      return output;
     }
-    return output;
-  }
-};
+    int* shift_;
+  };
 
-class HTopComponent : public ComponentBase {
-  Graph my_graph;
-
- public:
-  HTopComponent() {}
-  ~HTopComponent() override {}
-
-  Element Render() override {
+  Graph my_graph(&shift);
+  auto htop = Renderer([&] {
     auto frequency = vbox({
         text(L"Frequency [Mhz]") | hcenter,
         hbox({
@@ -98,52 +98,50 @@ class HTopComponent : public ComponentBase {
                ram | flex,
            }) |
            flex | border;
-  }
-};
+  });
 
-const std::vector<std::wstring> compiler_entries = {
-    L"gcc",
-    L"clang",
-    L"emcc",
-    L"game_maker",
-    L"Ada compilers",
-    L"ALGOL 60 compilers",
-    L"ALGOL 68 compilers",
-    L"Assemblers (Intel *86)",
-    L"Assemblers (Motorola 68*)",
-    L"Assemblers (Zilog Z80)",
-    L"Assemblers (other)",
-    L"BASIC Compilers",
-    L"BASIC interpreters",
-    L"Batch compilers",
-    L"C compilers",
-    L"Source-to-source compilers",
-    L"C++ compilers",
-    L"C# compilers",
-    L"COBOL compilers",
-    L"Common Lisp compilers",
-    L"D compilers",
-    L"DIBOL/DBL compilers",
-    L"ECMAScript interpreters",
-    L"Eiffel compilers",
-    L"Fortran compilers",
-    L"Go compilers",
-    L"Haskell compilers",
-    L"Java compilers",
-    L"Pascal compilers",
-    L"Perl Interpreters",
-    L"PHP compilers",
-    L"PL/I compilers",
-    L"Python compilers",
-    L"Scheme compilers and interpreters",
-    L"Smalltalk compilers",
-    L"Tcl Interpreters",
-    L"VMS Interpreters",
-    L"Rexx Interpreters",
-    L"CLI compilers",
-};
+  const std::vector<std::wstring> compiler_entries = {
+      L"gcc",
+      L"clang",
+      L"emcc",
+      L"game_maker",
+      L"Ada compilers",
+      L"ALGOL 60 compilers",
+      L"ALGOL 68 compilers",
+      L"Assemblers (Intel *86)",
+      L"Assemblers (Motorola 68*)",
+      L"Assemblers (Zilog Z80)",
+      L"Assemblers (other)",
+      L"BASIC Compilers",
+      L"BASIC interpreters",
+      L"Batch compilers",
+      L"C compilers",
+      L"Source-to-source compilers",
+      L"C++ compilers",
+      L"C# compilers",
+      L"COBOL compilers",
+      L"Common Lisp compilers",
+      L"D compilers",
+      L"DIBOL/DBL compilers",
+      L"ECMAScript interpreters",
+      L"Eiffel compilers",
+      L"Fortran compilers",
+      L"Go compilers",
+      L"Haskell compilers",
+      L"Java compilers",
+      L"Pascal compilers",
+      L"Perl Interpreters",
+      L"PHP compilers",
+      L"PL/I compilers",
+      L"Python compilers",
+      L"Scheme compilers and interpreters",
+      L"Smalltalk compilers",
+      L"Tcl Interpreters",
+      L"VMS Interpreters",
+      L"Rexx Interpreters",
+      L"CLI compilers",
+  };
 
-class CompilerComponent : public ComponentBase {
   int compiler_selected = 0;
   Component compiler = Radiobox(&compiler_entries, &compiler_selected);
 
@@ -178,28 +176,48 @@ class CompilerComponent : public ComponentBase {
       Checkbox(&options_label[3], &options_state[3]),
   });
 
- public:
-  ~CompilerComponent() override {}
-  CompilerComponent() {
-    Add(Container::Horizontal({
-        compiler,
-        flags,
-        Container::Vertical({
-            executable_,
-            Container::Horizontal({
-                input_add,
-                input,
-            }),
-        }),
-    }));
+  auto compiler_component = Container::Horizontal({
+      compiler,
+      flags,
+      Container::Vertical({
+          executable_,
+          Container::Horizontal({
+              input_add,
+              input,
+          }),
+      }),
+  });
 
-    InputBase::From(input_add)->on_enter = [this] {
-      input_entries.push_back(input_add_content);
-      input_add_content = L"";
-    };
-  }
+  InputBase::From(input_add)->on_enter = [&] {
+    input_entries.push_back(input_add_content);
+    input_add_content = L"";
+  };
 
-  Element Render() override {
+  auto render_command = [&] {
+    Elements line;
+    // Compiler
+    line.push_back(text(compiler_entries[compiler_selected]) | bold);
+    // flags
+    for (int i = 0; i < 4; ++i) {
+      if (options_state[i]) {
+        line.push_back(text(L" "));
+        line.push_back(text(options_label[i]) | dim);
+      }
+    }
+    // Executable
+    if (!executable_content_.empty()) {
+      line.push_back(text(L" -O ") | bold);
+      line.push_back(text(executable_content_) | color(Color::BlueLight) |
+                     bold);
+    }
+    // Input
+    for (auto& it : input_entries) {
+      line.push_back(text(L" " + it) | color(Color::RedLight));
+    }
+    return line;
+  };
+
+  auto compiler_renderer = Renderer(compiler_component, [&] {
     auto compiler_win = window(text(L"Compiler"), compiler->Render() | frame);
     auto flags_win = window(text(L"Flags"), flags->Render());
     auto executable_win = window(text(L"Executable:"), executable_->Render());
@@ -227,50 +245,21 @@ class CompilerComponent : public ComponentBase {
                    }),
                    filler(),
                }),
-               hflow(RenderCommandLine()) | flex_grow,
+               hflow(render_command()) | flex_grow,
            }) |
            flex_grow | border;
-  }
+  });
 
-  Elements RenderCommandLine() {
-    Elements line;
-    // Compiler
-    line.push_back(text(compiler_entries[compiler_selected]) | bold);
-    // flags
-    for (int i = 0; i < 4; ++i) {
-      if (options_state[i]) {
-        line.push_back(text(L" "));
-        line.push_back(text(options_label[i]) | dim);
-      }
-    }
-    // Executable
-    if (!executable_content_.empty()) {
-      line.push_back(text(L" -O ") | bold);
-      line.push_back(text(executable_content_) | color(Color::BlueLight) |
-                     bold);
-    }
-    // Input
-    for (auto& it : input_entries) {
-      line.push_back(text(L" " + it) | color(Color::RedLight));
-    }
-    return line;
-  }
-};
-
-class SpinnerComponent : public ComponentBase {
-  Element Render() override {
+  auto spinner_tab_renderer = Renderer([&] {
     Elements entries;
     for (int i = 0; i < 22; ++i) {
-      if (i != 0)
-        entries.push_back(spinner(i, shift / 2) | bold |
-                          size(WIDTH, GREATER_THAN, 2) | border);
+      entries.push_back(spinner(i, shift / 2) | bold |
+                        size(WIDTH, GREATER_THAN, 2) | border);
     }
     return hflow(std::move(entries)) | border;
-  }
-};
+  });
 
-class ColorComponent : public ComponentBase {
-  Element Render() override {
+  auto color_tab_renderer = Renderer([] {
     return hbox({
                vbox({
                    color(Color::Default, text(L"Default")),
@@ -312,79 +301,67 @@ class ColorComponent : public ComponentBase {
                }),
            }) |
            hcenter | border;
-  }
-};
+  });
 
-class GaugeComponent : public ComponentBase {
-  Element RenderGauge(int delta) {
+  auto render_gauge = [&shift](int delta) {
     float progress = (shift + delta) % 1000 / 1000.f;
     return hbox({
         text(std::to_wstring(int(progress * 100)) + L"% ") |
             size(WIDTH, EQUAL, 5),
         gauge(progress),
     });
-  }
-  Element Render() override {
+  };
+
+  auto gauge_component = Renderer([render_gauge] {
     return vbox({
-               RenderGauge(0) | color(Color::Black),
-               RenderGauge(100) | color(Color::GrayDark),
-               RenderGauge(50) | color(Color::GrayLight),
-               RenderGauge(6894) | color(Color::White),
+               render_gauge(0) | color(Color::Black),
+               render_gauge(100) | color(Color::GrayDark),
+               render_gauge(50) | color(Color::GrayLight),
+               render_gauge(6894) | color(Color::White),
                separator(),
-               RenderGauge(6841) | color(Color::Blue),
-               RenderGauge(9813) | color(Color::BlueLight),
-               RenderGauge(98765) | color(Color::Cyan),
-               RenderGauge(98) | color(Color::CyanLight),
-               RenderGauge(9846) | color(Color::Green),
-               RenderGauge(1122) | color(Color::GreenLight),
-               RenderGauge(84) | color(Color::Magenta),
-               RenderGauge(645) | color(Color::MagentaLight),
-               RenderGauge(568) | color(Color::Red),
-               RenderGauge(2222) | color(Color::RedLight),
-               RenderGauge(220) | color(Color::Yellow),
-               RenderGauge(348) | color(Color::YellowLight),
+               render_gauge(6841) | color(Color::Blue),
+               render_gauge(9813) | color(Color::BlueLight),
+               render_gauge(98765) | color(Color::Cyan),
+               render_gauge(98) | color(Color::CyanLight),
+               render_gauge(9846) | color(Color::Green),
+               render_gauge(1122) | color(Color::GreenLight),
+               render_gauge(84) | color(Color::Magenta),
+               render_gauge(645) | color(Color::MagentaLight),
+               render_gauge(568) | color(Color::Red),
+               render_gauge(2222) | color(Color::RedLight),
+               render_gauge(220) | color(Color::Yellow),
+               render_gauge(348) | color(Color::YellowLight),
            }) |
            border;
-  };
-};
+  });
 
-class Tab : public ComponentBase {
- public:
   int tab_index = 0;
   std::vector<std::wstring> tab_entries = {
       L"htop", L"color", L"spinner", L"gauge", L"compiler",
   };
-  Component tab_selection = Toggle(&tab_entries, &tab_index);
-  Component container =
-      Container::Tab(&tab_index,
-                     {
-                         std::make_shared<HTopComponent>(),
-                         std::make_shared<ColorComponent>(),
-                         std::make_shared<SpinnerComponent>(),
-                         std::make_shared<GaugeComponent>(),
-                         std::make_shared<CompilerComponent>(),
-                     });
+  auto tab_selection = Toggle(&tab_entries, &tab_index);
+  auto tab_content = Container::Tab(&tab_index, {
+                                                    htop,
+                                                    color_tab_renderer,
+                                                    spinner_tab_renderer,
+                                                    gauge_component,
+                                                    compiler_renderer,
+                                                });
 
-  Component main_container = Container::Vertical({
+  auto main_container = Container::Vertical({
       tab_selection,
-      container,
+      tab_content,
   });
 
-  Tab() { Add(main_container); }
-
-  Element Render() override {
+  auto main_renderer = Renderer(main_container, [&] {
     return vbox({
         text(L"FTXUI Demo") | bold | hcenter,
         tab_selection->Render() | hcenter,
-        container->Render() | flex,
+        tab_content->Render() | flex,
     });
-  }
-};
+  });
 
-int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::Fullscreen();
-
-  std::thread update([&screen]() {
+  std::thread update([&screen, &shift]() {
     for (;;) {
       using namespace std::chrono_literals;
       std::this_thread::sleep_for(0.05s);
@@ -393,8 +370,7 @@ int main(int argc, const char* argv[]) {
     }
   });
 
-  Component tab = std::make_shared<Tab>();
-  screen.Loop(tab);
+  screen.Loop(main_renderer);
 
   return 0;
 }
diff --git a/examples/component/slider_rgb.cpp b/examples/component/slider_rgb.cpp
new file mode 100644
index 00000000..1d046010
--- /dev/null
+++ b/examples/component/slider_rgb.cpp
@@ -0,0 +1,83 @@
+#include <functional>  // for function
+#include <memory>      // for allocator, __shared_ptr_access
+#include <string>      // for operator+, to_wstring, char_traits
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Slider, Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/container.hpp"       // for Container
+#include "ftxui/component/event.hpp"  // for Event, Event::Escape, Event::Return
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, operator|, Element, size, text, vbox, xflex, bgcolor, hbox, GREATER_THAN, WIDTH, border, HEIGHT, LESS_THAN
+#include "ftxui/screen/color.hpp"  // for Color
+
+using namespace ftxui;
+
+Element ColorTile(int red, int green, int blue) {
+  return text(L"") | size(WIDTH, GREATER_THAN, 14) |
+         size(HEIGHT, GREATER_THAN, 7) | bgcolor(Color::RGB(red, green, blue));
+}
+
+Element ColorString(int red, int green, int blue) {
+  return text(L"RGB = (" +                     //
+              std::to_wstring(red) + L"," +    //
+              std::to_wstring(green) + L"," +  //
+              std::to_wstring(blue) + L")"     //
+  );
+}
+
+class MyComponent : public ComponentBase {
+ private:
+  int* red_;
+  int* green_;
+  int* blue_;
+  Component slider_red_ = Slider(L"Red  :", red_, 0, 255, 1);
+  Component slider_green_ = Slider(L"Green:", green_, 0, 255, 1);
+  Component slider_blue_ = Slider(L"Blue :", blue_, 0, 255, 1);
+  std::function<void(void)> quit_;
+
+ public:
+  MyComponent(int* red, int* green, int* blue, std::function<void(void)> quit)
+      : red_(red), green_(green), blue_(blue), quit_(quit) {
+    Add(Container::Vertical({
+        slider_red_,
+        slider_green_,
+        slider_blue_,
+    }));
+  }
+
+  Element Render() {
+    return hbox({
+               ColorTile(*red_, *green_, *blue_),
+               separator(),
+               vbox({
+                   slider_red_->Render(),
+                   separator(),
+                   slider_green_->Render(),
+                   separator(),
+                   slider_blue_->Render(),
+                   separator(),
+                   ColorString(*red_, *green_, *blue_),
+               }) | xflex,
+           }) |
+           border | size(WIDTH, LESS_THAN, 80);
+  }
+
+  bool OnEvent(Event event) {
+    if (event == Event::Return || event == Event::Escape)
+      quit_();
+    return ComponentBase::OnEvent(event);
+  }
+};
+
+int main(int argc, const char* argv[]) {
+  auto screen = ScreenInteractive::TerminalOutput();
+  int red = 128;
+  int green = 25;
+  int blue = 100;
+  screen.Loop(Make<MyComponent>(&red, &green, &blue, screen.ExitLoopClosure()));
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp
index 882e10bf..b32459d8 100644
--- a/include/ftxui/component/component.hpp
+++ b/include/ftxui/component/component.hpp
@@ -26,6 +26,8 @@ Component Input(std::wstring* content, const std::wstring* placeholder);
 Component Menu(const std::vector<std::wstring>* entries, int* selected_);
 Component Radiobox(const std::vector<std::wstring>* entries, int* selected_);
 Component Toggle(const std::vector<std::wstring>* entries, int* selected);
+Component Renderer(Component child, std::function<Element()>);
+Component Renderer(std::function<Element()>);
 
 template <class T>  // T = {int, float}
 Component Slider(std::wstring label, T* value, T min, T max, T increment);
diff --git a/src/ftxui/component/renderer.cpp b/src/ftxui/component/renderer.cpp
new file mode 100644
index 00000000..27a0c9e4
--- /dev/null
+++ b/src/ftxui/component/renderer.cpp
@@ -0,0 +1,44 @@
+#include <functional>  // for function
+#include <memory>      // for shared_ptr
+
+#include "ftxui/component/component.hpp"       // for Make
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/elements.hpp"              // for Element
+
+namespace ftxui {
+
+/// @brief A component rendering Element from a function.
+/// @ingroup component.
+class RendererBase : public ComponentBase {
+ public:
+  // Access this interface from a Component
+  static RendererBase* From(Component component) {
+    return static_cast<RendererBase*>(component.get());
+  }
+
+  // Constructor.
+  RendererBase(std::function<Element()> render) : render_(std::move(render)) {}
+  ~RendererBase() override = default;
+
+  // Component implementation.
+  Element Render() override { return render_(); }
+
+ protected:
+  std::function<Element()> render_;
+};
+
+Component Renderer(std::function<Element()> render) {
+  return Make<RendererBase>(std::move(render));
+}
+
+Component Renderer(Component child, std::function<Element()> render) {
+  Component renderer = Renderer(std::move(render));
+  renderer->Add(std::move(child));
+  return renderer;
+}
+
+}  // namespace ftxui
+
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

From 58287c147a650fe026e112371571ad8c2acee638 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Fri, 14 May 2021 00:45:03 +0200
Subject: [PATCH 3/8] Update every component examples.

Use the functional style instead of classes.
---
 examples/component/input.cpp             |  38 +++---
 examples/component/menu2.cpp             |  26 ++--
 examples/component/menu_style.cpp        |  96 ++++++---------
 examples/component/modal_dialog.cpp      | 147 +++++++++--------------
 examples/component/radiobox_in_frame.cpp |  30 ++---
 examples/component/slider_rgb.cpp        |  74 +++++-------
 examples/component/tab_horizontal.cpp    |  54 ++++-----
 examples/component/tab_vertical.cpp      |  58 ++++-----
 examples/component/toggle.cpp            |  68 ++++-------
 9 files changed, 233 insertions(+), 358 deletions(-)

diff --git a/examples/component/input.cpp b/examples/component/input.cpp
index f9ab866d..e9d2841b 100644
--- a/examples/component/input.cpp
+++ b/examples/component/input.cpp
@@ -8,38 +8,34 @@
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for text, hbox, separator, border, vbox, Element
 
-using namespace ftxui;
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
   std::wstring first_name_;
   std::wstring last_name_;
   std::wstring first_name_placeholder_ = L"first_name";
   std::wstring last_name_placeholder_ = L"last_name";
+
   Component input_first_name_ = Input(&first_name_, &first_name_placeholder_);
   Component input_last_name_ = Input(&last_name_, &last_name_placeholder_);
 
-  Element Render() override {
-    return border(vbox({
-        text(L"Hello " + first_name_ + L" " + last_name_),
-        separator(),
-        hbox({text(L" First name  : "), input_first_name_->Render()}),
-        hbox({text(L" Last name   : "), input_last_name_->Render()}),
-    }));
-  }
+  auto component = Container::Vertical({
+      input_first_name_,
+      input_last_name_,
+  });
 
- public:
-  MyComponent() {
-    Add(Container::Vertical({
-        input_first_name_,
-        input_last_name_,
-    }));
-  }
-};
+  auto renderer = Renderer(component, [&] {
+    return vbox({
+               text(L"Hello " + first_name_ + L" " + last_name_),
+               separator(),
+               hbox({text(L" First name  : "), input_first_name_->Render()}),
+               hbox({text(L" Last name   : "), input_last_name_->Render()}),
+           }) |
+           border;
+  });
 
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/menu2.cpp b/examples/component/menu2.cpp
index 292d663d..8bb71a45 100644
--- a/examples/component/menu2.cpp
+++ b/examples/component/menu2.cpp
@@ -12,10 +12,9 @@
 #include "ftxui/dom/elements.hpp"  // for text, separator, bold, hcenter, vbox, hbox, gauge, Element, operator|, border
 #include "ftxui/screen/string.hpp"  // for to_wstring
 
-using namespace ftxui;
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
   std::vector<std::wstring> left_menu_entries = {
       L"0%",  L"10%", L"20%", L"30%", L"40%",
       L"50%", L"60%", L"70%", L"80%", L"90%",
@@ -28,12 +27,13 @@ class MyComponent : public ComponentBase {
   int right_menu_selected = 0;
   Component left_menu_ = Menu(&left_menu_entries, &left_menu_selected);
   Component right_menu_ = Menu(&right_menu_entries, &right_menu_selected);
+
   Component container = Container::Horizontal({
       left_menu_,
       right_menu_,
   });
 
-  Element Render() override {
+  auto renderer = Renderer(container, [&] {
     int sum = left_menu_selected * 10 + right_menu_selected;
     return vbox({
                // -------- Top panel --------------
@@ -67,22 +67,12 @@ class MyComponent : public ComponentBase {
                }),
            }) |
            border;
-  }
+  });
 
- public:
-  MyComponent() {
-    Add(container);
-    MenuBase::From(left_menu_)->on_enter = [this]() { on_enter(); };
-    MenuBase::From(right_menu_)->on_enter = [this]() { on_enter(); };
-  }
-  std::function<void()> on_enter = []() {};
-};
-
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  auto component = Make<MyComponent>();
-  component->on_enter = screen.ExitLoopClosure();
-  screen.Loop(component);
+  MenuBase::From(left_menu_)->on_enter = screen.ExitLoopClosure();
+  MenuBase::From(right_menu_)->on_enter = screen.ExitLoopClosure();
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/menu_style.cpp b/examples/component/menu_style.cpp
index 79f8ce10..65a0dce9 100644
--- a/examples/component/menu_style.cpp
+++ b/examples/component/menu_style.cpp
@@ -13,62 +13,24 @@
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, separator, bgcolor, color, flex, Decorator, bold, hbox, border, dim
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::BlueLight, Color::Red, Color::Yellow
 
-using namespace ftxui;
-
-std::vector<std::wstring> entries = {
-    L"Monkey", L"Dog", L"Cat", L"Bird", L"Elephant",
-};
-
-class MyComponent : public ComponentBase {
- public:
-  MyComponent(std::function<void(void)> exit) {
-    on_enter_ = exit;
-
-    Add(container);
-
-    for (Component menu :
-         {menu_1_, menu_2_, menu_3_, menu_4_, menu_5_, menu_6_})
-      MenuBase::From(menu)->on_enter = [this] { on_enter_(); };
-
-    MenuBase::From(menu_2_)->focused_style = bold | color(Color::Blue);
-    MenuBase::From(menu_2_)->selected_style = color(Color::Blue);
-    MenuBase::From(menu_2_)->selected_focused_style = bold | color(Color::Blue);
-
-    MenuBase::From(menu_3_)->selected_style = color(Color::Blue);
-    MenuBase::From(menu_3_)->focused_style = bgcolor(Color::Blue);
-    MenuBase::From(menu_3_)->selected_focused_style = bgcolor(Color::Blue);
-
-    MenuBase::From(menu_4_)->selected_style = bgcolor(Color::Blue);
-    MenuBase::From(menu_4_)->focused_style = bgcolor(Color::BlueLight);
-    MenuBase::From(menu_4_)->selected_focused_style = bgcolor(Color::BlueLight);
-
-    MenuBase::From(menu_5_)->normal_style = bgcolor(Color::Blue);
-    MenuBase::From(menu_5_)->selected_style = bgcolor(Color::Yellow);
-    MenuBase::From(menu_5_)->focused_style = bgcolor(Color::Red);
-    MenuBase::From(menu_5_)->selected_focused_style = bgcolor(Color::Red);
-
-    MenuBase::From(menu_6_)->normal_style = dim | color(Color::Blue);
-    MenuBase::From(menu_6_)->selected_style = color(Color::Blue);
-    MenuBase::From(menu_6_)->focused_style = bold | color(Color::Blue);
-    MenuBase::From(menu_6_)->selected_focused_style = bold | color(Color::Blue);
-  }
-
-  std::function<void()> on_enter_;
-
- private:
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
+  std::vector<std::wstring> entries = {
+      L"Monkey", L"Dog", L"Cat", L"Bird", L"Elephant",
+  };
   int menu_1_selected_ = 0;
   int menu_2_selected_ = 0;
   int menu_3_selected_ = 0;
   int menu_4_selected_ = 0;
   int menu_5_selected_ = 0;
   int menu_6_selected_ = 0;
-  Component menu_1_ = Menu(&entries, &menu_1_selected_);
-  Component menu_2_ = Menu(&entries, &menu_2_selected_);
-  Component menu_3_ = Menu(&entries, &menu_3_selected_);
-  Component menu_4_ = Menu(&entries, &menu_4_selected_);
-  Component menu_5_ = Menu(&entries, &menu_5_selected_);
-  Component menu_6_ = Menu(&entries, &menu_6_selected_);
-  Component container = Container::Horizontal({
+  auto menu_1_ = Menu(&entries, &menu_1_selected_);
+  auto menu_2_ = Menu(&entries, &menu_2_selected_);
+  auto menu_3_ = Menu(&entries, &menu_3_selected_);
+  auto menu_4_ = Menu(&entries, &menu_4_selected_);
+  auto menu_5_ = Menu(&entries, &menu_5_selected_);
+  auto menu_6_ = Menu(&entries, &menu_6_selected_);
+  auto container = Container::Horizontal({
       menu_1_,
       menu_2_,
       menu_3_,
@@ -78,7 +40,7 @@ class MyComponent : public ComponentBase {
   });
 
   // clang-format off
-  Element Render() override {
+  auto renderer = Renderer(container, [&] {
    return
       hbox({
         menu_1_->Render() | flex, separator(),
@@ -88,13 +50,35 @@ class MyComponent : public ComponentBase {
         menu_5_->Render() | flex, separator(),
         menu_6_->Render() | flex,
       }) | border;
-  }
+  });
   // clang-format on
-};
-
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
+  for (Component menu : {menu_1_, menu_2_, menu_3_, menu_4_, menu_5_, menu_6_})
+    MenuBase::From(menu)->on_enter = screen.ExitLoopClosure();
+
+  MenuBase::From(menu_2_)->focused_style = bold | color(Color::Blue);
+  MenuBase::From(menu_2_)->selected_style = color(Color::Blue);
+  MenuBase::From(menu_2_)->selected_focused_style = bold | color(Color::Blue);
+
+  MenuBase::From(menu_3_)->selected_style = color(Color::Blue);
+  MenuBase::From(menu_3_)->focused_style = bgcolor(Color::Blue);
+  MenuBase::From(menu_3_)->selected_focused_style = bgcolor(Color::Blue);
+
+  MenuBase::From(menu_4_)->selected_style = bgcolor(Color::Blue);
+  MenuBase::From(menu_4_)->focused_style = bgcolor(Color::BlueLight);
+  MenuBase::From(menu_4_)->selected_focused_style = bgcolor(Color::BlueLight);
+
+  MenuBase::From(menu_5_)->normal_style = bgcolor(Color::Blue);
+  MenuBase::From(menu_5_)->selected_style = bgcolor(Color::Yellow);
+  MenuBase::From(menu_5_)->focused_style = bgcolor(Color::Red);
+  MenuBase::From(menu_5_)->selected_focused_style = bgcolor(Color::Red);
+
+  MenuBase::From(menu_6_)->normal_style = dim | color(Color::Blue);
+  MenuBase::From(menu_6_)->selected_style = color(Color::Blue);
+  MenuBase::From(menu_6_)->focused_style = bold | color(Color::Blue);
+  MenuBase::From(menu_6_)->selected_focused_style = bold | color(Color::Blue);
+
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/modal_dialog.cpp b/examples/component/modal_dialog.cpp
index 1528d3c2..91317dee 100644
--- a/examples/component/modal_dialog.cpp
+++ b/examples/component/modal_dialog.cpp
@@ -10,121 +10,84 @@
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for Element, operator|, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
 
-using namespace ftxui;
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
+  auto screen = ScreenInteractive::TerminalOutput();
 
-// The main screen, at depth 0. It display the main content.
-class Content : public ComponentBase {
- private:
-  std::wstring label_rate_ftxui_ = L"Rate FTXUI";
-  std::wstring label_quit_ = L"Quit";
-  bool modal_open_ = false;
+  // There are two layers. One at depth = 0 and the modal window at depth = 1;
+  int depth = 0;
 
-  Component button_rate_ftxui_ =
-      Button(&label_rate_ftxui_, [this] { on_rate_ftxui(); });
-  Component button_quit_ = Button(&label_quit_, [this] { on_quit(); });
-  Component container_ = Container::Horizontal({
-      button_rate_ftxui_,
-      button_quit_,
-  });
-
- public:
+  // The current rating of FTXUI.
   std::wstring rating = L"3/5 stars";
-  std::function<void()> on_rate_ftxui;
-  std::function<void()> on_quit;
 
-  Content() { Add(container_); }
+  // At depth=0, two buttons. One for rating FTXUI and one for quitting.
+  std::wstring label_rate_ftxui = L"Rate FTXUI";
+  std::wstring label_quit = L"Quit";
+  auto button_rate_ftxui = Button(&label_rate_ftxui, [&] { depth = 1; });
+  auto button_quit = Button(&label_quit, screen.ExitLoopClosure());
 
-  Element Render() final {
-    auto document =  //
-        vbox({
-            text(L"Modal dialog example"),
-            separator(),
-            text(L"☆☆☆ FTXUI:" + rating + L" ☆☆☆") | bold,
-            filler(),
-            hbox({
-                button_rate_ftxui_->Render(),
-                filler(),
-                button_quit_->Render(),
-            }),
-        }) |
-        border;
-
-    return document | size(HEIGHT, GREATER_THAN, 18) | center;
-  }
-};
-
-std::vector<std::wstring> rating_labels = {
-    L"1/5 stars", L"2/5 stars", L"3/5 stars", L"4/5 stars", L"5/5 stars",
-};
-
-// The "modal" screen, at depth 1. It display the modal dialog.
-class Modal : public ComponentBase {
- private:
-  Component container_ = Container::Horizontal({
-      Button(&rating_labels[0], [this] { on_click(rating_labels[0]); }),
-      Button(&rating_labels[1], [this] { on_click(rating_labels[1]); }),
-      Button(&rating_labels[2], [this] { on_click(rating_labels[2]); }),
-      Button(&rating_labels[3], [this] { on_click(rating_labels[3]); }),
-      Button(&rating_labels[4], [this] { on_click(rating_labels[4]); }),
+  auto depth_0_container = Container::Horizontal({
+      button_rate_ftxui,
+      button_quit,
+  });
+  auto depth_0_renderer = Renderer(depth_0_container, [&] {
+    return vbox({
+               text(L"Modal dialog example"),
+               separator(),
+               text(L"☆☆☆ FTXUI:" + rating + L" ☆☆☆") | bold,
+               filler(),
+               hbox({
+                   button_rate_ftxui->Render(),
+                   filler(),
+                   button_quit->Render(),
+               }),
+           }) |
+           border | size(HEIGHT, GREATER_THAN, 18) | center;
   });
 
- public:
-  std::function<void(std::wstring)> on_click;
+  // At depth=1, The "modal" window.
+  std::vector<std::wstring> rating_labels = {
+      L"1/5 stars", L"2/5 stars", L"3/5 stars", L"4/5 stars", L"5/5 stars",
+  };
+  auto on_rating = [&](std::wstring new_rating) {
+    rating = new_rating;
+    depth = 0;
+  };
+  auto depth_1_container = Container::Horizontal({
+      Button(&rating_labels[0], [&] { on_rating(rating_labels[0]); }),
+      Button(&rating_labels[1], [&] { on_rating(rating_labels[1]); }),
+      Button(&rating_labels[2], [&] { on_rating(rating_labels[2]); }),
+      Button(&rating_labels[3], [&] { on_rating(rating_labels[3]); }),
+      Button(&rating_labels[4], [&] { on_rating(rating_labels[4]); }),
+  });
 
-  Modal() { Add(container_); }
-
-  Element Render() final {
+  auto depth_1_renderer = Renderer(depth_1_container, [&] {
     return vbox({
                text(L"Do you like FTXUI?"),
                separator(),
-               hbox(container_->Render()),
+               hbox(depth_1_container->Render()),
            }) |
            border;
-  }
-};
+  });
 
-class MyComponent : public ComponentBase {
- private:
-  std::shared_ptr<Content> content_ = std::make_shared<Content>();
-  std::shared_ptr<Modal> modal_ = std::make_shared<Modal>();
+  auto main_container = Container::Tab(&depth, {
+                                                   depth_0_renderer,
+                                                   depth_1_renderer,
+                                               });
 
-  int depth = 0;
-  Component container_ = Container::Tab(&depth,
-                                        {
-                                            content_,
-                                            modal_,
-                                        });
-
-  std::function<void()> on_quit_;
-
- public:
-  MyComponent(std::function<void()> on_quit) : on_quit_(on_quit) {
-    Add(container_);
-
-    content_->on_quit = [&] { on_quit(); };
-    content_->on_rate_ftxui = [this] { depth = 1; };
-    modal_->on_click = [&](std::wstring rating) {
-      content_->rating = rating;
-      depth = 0;
-    };
-  }
-
-  Element Render() final {
-    Element document = content_->Render();
+  auto main_renderer = Renderer(main_container, [&] {
+    Element document = depth_0_renderer->Render();
 
     if (depth == 1) {
       document = dbox({
           document,
-          modal_->Render() | clear_under | center,
+          depth_1_renderer->Render() | clear_under | center,
       });
     }
     return document;
-  }
-};
+  });
 
-int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
+  screen.Loop(main_renderer);
   return 0;
 }
 
diff --git a/examples/component/radiobox_in_frame.cpp b/examples/component/radiobox_in_frame.cpp
index 31b36ad5..ff5514ee 100644
--- a/examples/component/radiobox_in_frame.cpp
+++ b/examples/component/radiobox_in_frame.cpp
@@ -10,27 +10,19 @@
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
-  std::vector<std::wstring> entries_;
-  int selected_ = 0;
-
- public:
-  MyComponent() {
-    for (int i = 0; i < 30; ++i)
-      entries_.push_back(L"RadioBox " + to_wstring(i));
-    Add(Radiobox(&entries_, &selected_));
-  }
-
-  Element Render() override {
-    return ComponentBase::Render() | frame | size(HEIGHT, LESS_THAN, 10) |
-           border;
-  }
-};
-
 int main(int argc, const char* argv[]) {
+  std::vector<std::wstring> entries;
+  int selected = 0;
+
+  for (int i = 0; i < 30; ++i)
+    entries.push_back(L"RadioBox " + to_wstring(i));
+  auto radiobox = Radiobox(&entries, &selected);
+  auto renderer = Renderer(radiobox, [&] {
+    return radiobox->Render() | frame | size(HEIGHT, LESS_THAN, 10) | border;
+  });
+
   auto screen = ScreenInteractive::FitComponent();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(renderer);
 
   return 0;
 }
diff --git a/examples/component/slider_rgb.cpp b/examples/component/slider_rgb.cpp
index 1d046010..07f4b00b 100644
--- a/examples/component/slider_rgb.cpp
+++ b/examples/component/slider_rgb.cpp
@@ -26,56 +26,38 @@ Element ColorString(int red, int green, int blue) {
   );
 }
 
-class MyComponent : public ComponentBase {
- private:
-  int* red_;
-  int* green_;
-  int* blue_;
-  Component slider_red_ = Slider(L"Red  :", red_, 0, 255, 1);
-  Component slider_green_ = Slider(L"Green:", green_, 0, 255, 1);
-  Component slider_blue_ = Slider(L"Blue :", blue_, 0, 255, 1);
-  std::function<void(void)> quit_;
-
- public:
-  MyComponent(int* red, int* green, int* blue, std::function<void(void)> quit)
-      : red_(red), green_(green), blue_(blue), quit_(quit) {
-    Add(Container::Vertical({
-        slider_red_,
-        slider_green_,
-        slider_blue_,
-    }));
-  }
-
-  Element Render() {
-    return hbox({
-               ColorTile(*red_, *green_, *blue_),
-               separator(),
-               vbox({
-                   slider_red_->Render(),
-                   separator(),
-                   slider_green_->Render(),
-                   separator(),
-                   slider_blue_->Render(),
-                   separator(),
-                   ColorString(*red_, *green_, *blue_),
-               }) | xflex,
-           }) |
-           border | size(WIDTH, LESS_THAN, 80);
-  }
-
-  bool OnEvent(Event event) {
-    if (event == Event::Return || event == Event::Escape)
-      quit_();
-    return ComponentBase::OnEvent(event);
-  }
-};
-
 int main(int argc, const char* argv[]) {
-  auto screen = ScreenInteractive::TerminalOutput();
   int red = 128;
   int green = 25;
   int blue = 100;
-  screen.Loop(Make<MyComponent>(&red, &green, &blue, screen.ExitLoopClosure()));
+  auto slider_red = Slider(L"Red  :", &red, 0, 255, 1);
+  auto slider_green = Slider(L"Green:", &green, 0, 255, 1);
+  auto slider_blue = Slider(L"Blue :", &blue, 0, 255, 1);
+
+  auto container = Container::Vertical({
+      slider_red,
+      slider_green,
+      slider_blue,
+  });
+
+  auto renderer = Renderer(container, [&] {
+    return hbox({
+               ColorTile(red, green, blue),
+               separator(),
+               vbox({
+                   slider_red->Render(),
+                   separator(),
+                   slider_green->Render(),
+                   separator(),
+                   slider_blue->Render(),
+                   separator(),
+                   ColorString(red, green, blue),
+               }) | xflex,
+           }) |
+           border | size(WIDTH, LESS_THAN, 80);
+  });
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/tab_horizontal.cpp b/examples/component/tab_horizontal.cpp
index 4897e7b9..5b849c19 100644
--- a/examples/component/tab_horizontal.cpp
+++ b/examples/component/tab_horizontal.cpp
@@ -11,67 +11,59 @@
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
-  std::vector<std::wstring> tab_values_ = {
+int main(int argc, const char* argv[]) {
+  std::vector<std::wstring> tab_values{
       L"tab_1",
       L"tab_2",
       L"tab_3",
   };
-  int tab_selected_ = 0;
-  Component tab_toggle_ = Toggle(&tab_values_, &tab_selected_);
+  int tab_selected = 0;
+  auto tab_toggle = Toggle(&tab_values, &tab_selected);
 
-  std::vector<std::wstring> tab_1_entries_ = {
+  std::vector<std::wstring> tab_1_entries{
       L"Forest",
       L"Water",
       L"I don't know",
   };
-  int tab_1_selected_ = 0;
+  int tab_1_selected = 0;
 
-  std::vector<std::wstring> tab_2_entries_ = {
+  std::vector<std::wstring> tab_2_entries{
       L"Hello",
       L"Hi",
       L"Hay",
   };
-  int tab_2_selected_ = 0;
+  int tab_2_selected = 0;
 
-  std::vector<std::wstring> tab_3_entries_ = {
+  std::vector<std::wstring> tab_3_entries{
       L"Table",
       L"Nothing",
       L"Is",
       L"Empty",
   };
-  int tab_3_selected_ = 0;
-
-  Component tab_container_ =
-      Container::Tab(&tab_selected_,
-                     {
-                         Radiobox(&tab_1_entries_, &tab_1_selected_),
-                         Radiobox(&tab_2_entries_, &tab_2_selected_),
-                         Radiobox(&tab_3_entries_, &tab_3_selected_),
+  int tab_3_selected = 0;
+  auto tab_container = Container::Tab(
+      &tab_selected, {
+                         Radiobox(&tab_1_entries, &tab_1_selected),
+                         Radiobox(&tab_2_entries, &tab_2_selected),
+                         Radiobox(&tab_3_entries, &tab_3_selected),
                      });
 
-  Component container_ = Container::Vertical({
-      tab_toggle_,
-      tab_container_,
+  auto container = Container::Vertical({
+      tab_toggle,
+      tab_container,
   });
 
- public:
-  MyComponent() { Add(container_); }
-
-  Element Render() {
+  auto renderer = Renderer(container, [&] {
     return vbox({
-               tab_toggle_->Render(),
+               tab_toggle->Render(),
                separator(),
-               tab_container_->Render(),
+               tab_container->Render(),
            }) |
            border;
-  }
-};
+  });
 
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/tab_vertical.cpp b/examples/component/tab_vertical.cpp
index b49127ca..f2c6c5f4 100644
--- a/examples/component/tab_vertical.cpp
+++ b/examples/component/tab_vertical.cpp
@@ -3,75 +3,67 @@
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Radiobox, Make, Menu
+#include "ftxui/component/component.hpp"       // for Radiobox, Make, Toggle
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for Element, separator, hbox, operator|, border
+#include "ftxui/dom/elements.hpp"  // for Element, separator, operator|, vbox, border
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
-  std::vector<std::wstring> tab_values_ = {
+int main(int argc, const char* argv[]) {
+  std::vector<std::wstring> tab_values{
       L"tab_1",
       L"tab_2",
       L"tab_3",
   };
-  int tab_selected_ = 0;
-  Component tab_toggle_ = Menu(&tab_values_, &tab_selected_);
+  int tab_selected = 0;
+  auto tab_menu = Menu(&tab_values, &tab_selected);
 
-  std::vector<std::wstring> tab_1_entries_ = {
+  std::vector<std::wstring> tab_1_entries{
       L"Forest",
       L"Water",
       L"I don't know",
   };
-  int tab_1_selected_ = 0;
+  int tab_1_selected = 0;
 
-  std::vector<std::wstring> tab_2_entries_ = {
+  std::vector<std::wstring> tab_2_entries{
       L"Hello",
       L"Hi",
       L"Hay",
   };
-  int tab_2_selected_ = 0;
+  int tab_2_selected = 0;
 
-  std::vector<std::wstring> tab_3_entries_ = {
+  std::vector<std::wstring> tab_3_entries{
       L"Table",
       L"Nothing",
       L"Is",
       L"Empty",
   };
-  int tab_3_selected_ = 0;
-
-  Component tab_container_ =
-      Container::Tab(&tab_selected_,
-                     {
-                         Radiobox(&tab_1_entries_, &tab_1_selected_),
-                         Radiobox(&tab_2_entries_, &tab_2_selected_),
-                         Radiobox(&tab_3_entries_, &tab_3_selected_),
+  int tab_3_selected = 0;
+  auto tab_container = Container::Tab(
+      &tab_selected, {
+                         Radiobox(&tab_1_entries, &tab_1_selected),
+                         Radiobox(&tab_2_entries, &tab_2_selected),
+                         Radiobox(&tab_3_entries, &tab_3_selected),
                      });
 
-  Component container_ = Container::Horizontal({
-      tab_toggle_,
-      tab_container_,
+  auto container = Container::Horizontal({
+      tab_menu,
+      tab_container,
   });
 
- public:
-  MyComponent() { Add(container_); }
-
-  Element Render() {
+  auto renderer = Renderer(container, [&] {
     return hbox({
-               tab_toggle_->Render(),
+               tab_menu->Render(),
                separator(),
-               tab_container_->Render(),
+               tab_container->Render(),
            }) |
            border;
-  }
-};
+  });
 
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>());
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
diff --git a/examples/component/toggle.cpp b/examples/component/toggle.cpp
index cae234e4..6159d438 100644
--- a/examples/component/toggle.cpp
+++ b/examples/component/toggle.cpp
@@ -13,70 +13,54 @@
 
 using namespace ftxui;
 
-class MyComponent : public ComponentBase {
- private:
-  std::vector<std::wstring> toggle_1_entries_ = {
+int main(int argc, const char* argv[]) {
+  std::vector<std::wstring> toggle_1_entries = {
       L"On",
       L"Off",
   };
-  std::vector<std::wstring> toggle_2_entries_ = {
+  std::vector<std::wstring> toggle_2_entries = {
       L"Enabled",
       L"Disabled",
   };
-  std::vector<std::wstring> toggle_3_entries_ = {
+  std::vector<std::wstring> toggle_3_entries = {
       L"10€",
       L"0€",
   };
-  std::vector<std::wstring> toggle_4_entries_ = {
+  std::vector<std::wstring> toggle_4_entries = {
       L"Nothing",
       L"One element",
       L"Several elements",
   };
 
-  int toggle_1_selected_ = 0;
-  int toggle_2_selected_ = 0;
-  int toggle_3_selected_ = 0;
-  int toggle_4_selected_ = 0;
-  Component toggle_1_ = Toggle(&toggle_1_entries_, &toggle_1_selected_);
-  Component toggle_2_ = Toggle(&toggle_2_entries_, &toggle_2_selected_);
-  Component toggle_3_ = Toggle(&toggle_3_entries_, &toggle_3_selected_);
-  Component toggle_4_ = Toggle(&toggle_4_entries_, &toggle_4_selected_);
+  int toggle_1_selected = 0;
+  int toggle_2_selected = 0;
+  int toggle_3_selected = 0;
+  int toggle_4_selected = 0;
+  Component toggle_1 = Toggle(&toggle_1_entries, &toggle_1_selected);
+  Component toggle_2 = Toggle(&toggle_2_entries, &toggle_2_selected);
+  Component toggle_3 = Toggle(&toggle_3_entries, &toggle_3_selected);
+  Component toggle_4 = Toggle(&toggle_4_entries, &toggle_4_selected);
 
-  std::function<void()> exit_;
+  auto container = Container::Vertical({
+      toggle_1,
+      toggle_2,
+      toggle_3,
+      toggle_4,
+  });
 
-  Element Render() override {
+  auto renderer = Renderer(container, [&] {
     return vbox({
         text(L"Choose your options:"),
         text(L""),
-        hbox(text(L" * Poweroff on startup      : "), toggle_1_->Render()),
-        hbox(text(L" * Out of process           : "), toggle_2_->Render()),
-        hbox(text(L" * Price of the information : "), toggle_3_->Render()),
-        hbox(text(L" * Number of elements       : "), toggle_4_->Render()),
+        hbox(text(L" * Poweroff on startup      : "), toggle_1->Render()),
+        hbox(text(L" * Out of process           : "), toggle_2->Render()),
+        hbox(text(L" * Price of the information : "), toggle_3->Render()),
+        hbox(text(L" * Number of elements       : "), toggle_4->Render()),
     });
-  }
+  });
 
-  bool OnEvent(Event event) override {
-    if (event == Event::Return) {
-      exit_();
-      return true;
-    }
-    return ComponentBase::OnEvent(event);
-  }
-
- public:
-  MyComponent(std::function<void()> exit) : exit_(exit) {
-    Add(Container::Vertical({
-        toggle_1_,
-        toggle_2_,
-        toggle_3_,
-        toggle_4_,
-    }));
-  }
-};
-
-int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(Make<MyComponent>(screen.ExitLoopClosure()));
+  screen.Loop(renderer);
 }
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.

From 9fdf235836479a4129846e353876d7e55698349e Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Fri, 14 May 2021 20:56:37 +0200
Subject: [PATCH 4/8] Improve the documentation.

---
 doc/mainpage.md                       | 213 +++++++++++---------------
 include/ftxui/component/component.hpp |  10 +-
 include/ftxui/component/container.hpp |   8 +-
 src/ftxui/component/container.cpp     | 111 ++++++++++----
 src/ftxui/component/renderer.cpp      |  33 ++++
 5 files changed, 217 insertions(+), 158 deletions(-)

diff --git a/doc/mainpage.md b/doc/mainpage.md
index 94fe5d8a..38434b92 100644
--- a/doc/mainpage.md
+++ b/doc/mainpage.md
@@ -44,28 +44,71 @@ int main(void) {
 └────┘└─────────────────────────────────────────────────────────────────┘└─────┘
 ```
 
-**cmake**
-```c
+# Build
+
+## Using CMake
+
+CMakeLists.txt
+~~~cmake
 cmake_minimum_required (VERSION 3.11)
 
+# --- Fetch FTXUI --------------------------------------------------------------
 include(FetchContent)
+
+set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
 FetchContent_Declare(ftxui
   GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
+  # Specify a GIT_TAG here.
 )
+
 FetchContent_GetProperties(ftxui)
 if(NOT ftxui_POPULATED)
   FetchContent_Populate(ftxui)
   add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
 endif()
 
-add_executable(main src/main.cpp)
-target_link_libraries(main
+# ------------------------------------------------------------------------------
+
+project(ftxui-starter
+  LANGUAGES CXX
+  VERSION 1.0.0
+)
+
+add_executable(ftxui-starter src/main.cpp)
+target_include_directories(ftxui-starter PRIVATE src)
+
+target_link_libraries(ftxui-starter
   PRIVATE ftxui::screen
   PRIVATE ftxui::dom
   PRIVATE ftxui::component # Not needed for this example.
 )
-set_target_properties(main PROPERTIES CXX_STANDARD 17)
-```
+
+# C++17 is used. We requires fold expressions at least.
+set_target_properties(ftxui-starter PROPERTIES CXX_STANDARD 17)
+
+~~~
+
+Build
+~~~
+mkdir build && cd build
+cmake ..
+make
+./main
+~~~
+
+## Using NXXM
+
+**.nxxm/deps**
+~~~json
+{
+  "ArthurSonzogni/FTXUI": {}
+}
+~~~
+
+Build:
+~~~
+nxxm . -t clang-cxx17
+~~~
 
 # List of modules.
 
@@ -82,7 +125,7 @@ input. It defines a set of ftxui::Component.  The use can navigates using the
 arrow keys and interact with widgets like checkbox/inputbox/... You can make you
 own components.
 
-## screen
+# screen
 
 It defines a ftxui::Screen. This is a grid of ftxui::Pixel. A Pixel represent a
 unicode character and its associated style (bold, colors, etc...).
@@ -106,7 +149,7 @@ The screen can be printed as a string using ftxui::Screen::ToString().
   }
 ~~~
 
-## dom
+# dom
 
 This module defines a hierachical set of Element. An element manages layout and can be responsive to the terminal dimensions.
 
@@ -130,30 +173,6 @@ You only need one header: ftxui/dom/elements.hpp
 
 \include ftxui/dom/elements.hpp
 
-## component
-
-Finally, the ftxui/component directory defines the logic to get interactivity.
-
-Please take a look at ./examples/component
-
-This provides:
-1. A main loop.
-2. Get events and respond to them.
-3. A predefined implementation of "keyboard navigation".
-4. A set of predefined widget: CheckBox, RadioBox, Input, Menu, Toggle.
-
-
-**List of Component**
-
-You only need one header: ftxui/dom/component.hpp
-
-\include ftxui/component/component.hpp
-
-# ftxui/dom
-
-Every elements of the dom are declared from:
-\ref ftxui/dom/elements.hpp
-
 ## text
 
 The most simple widget. It displays a text.
@@ -226,6 +245,7 @@ border(gauge(0.5))
 ~~~
 
 ## graph
+
 @htmlonly
 <script id="asciicast-223726" src="https://asciinema.org/a/223726.js" async></script>
 @endhtmlonly
@@ -369,7 +389,25 @@ An horizontal flow layout is implemented by:
 └────┘└───────────────────────────────────┘└───────────────────────────────────┘
 ~~~
 
-# ftxui/component
+
+# component
+
+The `ftxui/component` directory defines the logic to get produce
+interactive component responding to user's events (keyboard, mouse, etc...)
+
+A ftxui::ScreenInteractive defines a main loop to render a component.
+
+A ftxui::Component is a shared pointer to a ftxui::ComponentBase. The later
+defines
+  - ftxui::ComponentBase::Render(): How to render the interface.
+  - ftxui::ComponentBase::OnEvent(): How to react to events.
+  - ftxui::ComponentBase::Add(): Give a parent/child relation ship in between
+    two component. This defines a tree a components, which help properly define
+    how keyboard navigation works.
+
+Predefined components are available in `ftxui/dom/component.hpp`:
+
+\include ftxui/component/component.hpp
 
 Element are stateless object. On the other side, components are used when an
 internal state is needed. Components are used to interact with the user with
@@ -377,7 +415,7 @@ its keyboard. They handle keyboard navigation, including component focus.
 
 ## Input
 
-The component: \ref ftxui::Input
+Produced by: ftxui::Input() from "ftxui/component/component.hpp"
 
 @htmlonly
 <script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script>
@@ -385,7 +423,7 @@ The component: \ref ftxui::Input
 
 ## Menu
 
-The component: \ref ftxui::Menu
+Produced by: ftxui::Menu() from "ftxui/component/component.hpp"
 
 @htmlonly
 <script id="asciicast-223720" src="https://asciinema.org/a/223720.js" async></script>
@@ -393,7 +431,7 @@ The component: \ref ftxui::Menu
 
 ## Toggle.
 
-The component: \ref ftxui::Toggle
+Produced by: ftxui::Toggle() from "ftxui/component/component.hpp"
 
 @htmlonly
 <script id="asciicast-223722" src="https://asciinema.org/a/223722.js" async></script>
@@ -401,7 +439,7 @@ The component: \ref ftxui::Toggle
 
 ## CheckBox
 
-The component: \ref ftxui::CheckBox
+Produced by: ftxui::Checkbox() from "ftxui/component/component.hpp"
 
 @htmlonly
 <script id="asciicast-223724" src="https://asciinema.org/a/223724.js" async></script>
@@ -409,99 +447,32 @@ The component: \ref ftxui::CheckBox
 
 ## RadioBox
 
-The component: \ref ftxui::RadioBox
+Produced by: ftxui::Radiobox() from "ftxui/component/component.hpp"
 
 @htmlonly
 <script id="asciicast-223725" src="https://asciinema.org/a/223725.js" async></script>
 @endhtmlonly
 
-# Build
+## Renderer
 
-Assuming this example example.cpp file.
+Produced by: ftxui::Renderer() from \ref "ftxui/component/component.hpp". This
+component decorate another one by using a different function to render an
+interface.
 
-**main.cpp**
-~~~cpp
-#include "ftxui/screen/screen.c
-#include "ftxui/dom/elements.c
-#include <iostream>
+## Container::Horizontal 
 
-int main(int argc, const char *argv[]) {
-  using namespace ftxui;
-  auto document =
-    hbox({
-      text(L"left") | bold | border,
-      text(L"middle") | flex | border,
-      text(L"right") | border,
-    });
-  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
-  Render(screen, document);
+Produced by: ftxui::Container::Horizontal() from
+"ftxui/component/component.hpp". It displays a list of components horizontally
+and handle keyboard/mouse navigation.
 
-  std::cout << screen.ToString();
+## Container::Vertial
 
-  return 0;
-}
-~~~
+Produced by: ftxui::Container::Vertical() from
+"ftxui/component/component.hpp". It displays a list of components vertically 
+and handles keyboard/mouse navigation.
 
-## Using CMake
+## Container::Tab
 
-CMakeLists.txt
-~~~cmake
-cmake_minimum_required (VERSION 3.11)
-
-# --- Fetch FTXUI --------------------------------------------------------------
-include(FetchContent)
-
-set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
-FetchContent_Declare(ftxui
-  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  # Specify a GIT TAG here.
-)
-
-FetchContent_GetProperties(ftxui)
-if(NOT ftxui_POPULATED)
-  FetchContent_Populate(ftxui)
-  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
-endif()
-
-# ------------------------------------------------------------------------------
-
-project(ftxui-starter
-  LANGUAGES CXX
-  VERSION 1.0.0
-)
-
-add_executable(ftxui-starter src/main.cpp)
-target_include_directories(ftxui-starter PRIVATE src)
-
-target_link_libraries(ftxui-starter
-  PRIVATE ftxui::screen
-  PRIVATE ftxui::dom
-  PRIVATE ftxui::component # Not needed for this example.
-)
-
-# C++17 is used. We requires fold expressions at least.
-set_target_properties(ftxui-starter PROPERTIES CXX_STANDARD 17)
-
-~~~
-
-Build
-~~~
-mkdir build && cd build
-cmake ..
-make
-./main
-~~~
-
-## Using NXXM
-
-**.nxxm/deps**
-~~~json
-{
-  "ArthurSonzogni/FTXUI": {}
-}
-~~~
-
-Build:
-~~~
-nxxm . -t clang-cxx17
-~~~
+Produced by: ftxui::Container::Tab() from
+"ftxui/component/component.hpp". It take a list of component and display only
+one of them. This is useful for implementing a tab bar.
diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp
index b32459d8..47e942c7 100644
--- a/include/ftxui/component/component.hpp
+++ b/include/ftxui/component/component.hpp
@@ -32,11 +32,11 @@ Component Renderer(std::function<Element()>);
 template <class T>  // T = {int, float}
 Component Slider(std::wstring label, T* value, T min, T max, T increment);
 
-// namespace Component {
-// Component Vertical(Components children);
-// Component Horizontal(Components children);
-// Component Tab(int* selector, Components children);
-//}  // namespace Component
+namespace Container {
+Component Vertical(Components children);
+Component Horizontal(Components children);
+Component Tab(int* selector, Components children);
+}  // namespace Container
 
 };  // namespace ftxui
 
diff --git a/include/ftxui/component/container.hpp b/include/ftxui/component/container.hpp
index 19277c79..f15b65fa 100644
--- a/include/ftxui/component/container.hpp
+++ b/include/ftxui/component/container.hpp
@@ -9,7 +9,7 @@
 namespace ftxui {
 
 /// @brief A component where focus and events are automatically handled for you.
-class Container : public ComponentBase {
+class ContainerBase : public ComponentBase {
  public:
   static Component Vertical();
   static Component Vertical(Components children);
@@ -20,7 +20,7 @@ class Container : public ComponentBase {
   static Component Tab(int* selector);
   static Component Tab(int* selector, Components children);
 
-  ~Container() override = default;
+  ~ContainerBase() override = default;
 
   // Component override.
   bool OnEvent(Event event) override;
@@ -30,13 +30,13 @@ class Container : public ComponentBase {
 
  protected:
   // Handlers
-  using EventHandler = bool (Container::*)(Event);
+  using EventHandler = bool (ContainerBase::*)(Event);
   bool VerticalEvent(Event event);
   bool HorizontalEvent(Event event);
   bool TabEvent(Event) { return false; }
   EventHandler event_handler_;
 
-  using RenderHandler = Element (Container::*)();
+  using RenderHandler = Element (ContainerBase::*)();
   Element VerticalRender();
   Element HorizontalRender();
   Element TabRender();
diff --git a/src/ftxui/component/container.cpp b/src/ftxui/component/container.cpp
index 7efc0dcf..3dc9fdf0 100644
--- a/src/ftxui/component/container.cpp
+++ b/src/ftxui/component/container.cpp
@@ -9,65 +9,120 @@
 
 namespace ftxui {
 
-Component ContainerVertical(Components children) {
-  return Container::Vertical(std::move(children));
+namespace Container {
+
+/// @brief A list of components, drawn one by one vertically and navigated
+/// vertically using up/down arrow key or 'j'/'k' keys.
+/// @param children the list of components.
+/// @ingroup component
+/// @see ContainerBase 
+///
+/// ### Example
+///
+/// ```cpp
+/// auto container = Container::Vertical({
+///   children_1,
+///   children_2,
+///   children_3,
+///   children_4,
+/// });
+/// ```
+Component Vertical(Components children) {
+  return ContainerBase::Vertical(std::move(children));
 }
 
-Component ContainerHorizontal(Components children) {
-  return Container::Horizontal(std::move(children));
+/// @brief A list of components, drawn one by one horizontally and navigated
+/// horizontally using left/right arrow key or 'h'/'l' keys.
+/// @param children the list of components.
+/// @ingroup component
+/// @see ContainerBase 
+///
+/// ### Example
+///
+/// ```cpp
+/// auto container = Container::Horizontal({
+///   children_1,
+///   children_2,
+///   children_3,
+///   children_4,
+/// });
+/// ```
+Component Horizontal(Components children) {
+  return ContainerBase::Horizontal(std::move(children));
 }
 
-Component ContainerTab(int* selector, Components children) {
-  return Container::Tab(selector, std::move(children));
+/// @brief A list of components, where only one is drawn and interacted with at
+/// a time. The |selector| gives the index of the selected component. This is
+/// useful to implement tabs.
+/// @param selector The index of the drawn children.
+/// @param children the list of components.
+/// @ingroup component
+/// @see ContainerBase 
+///
+/// ### Example
+///
+/// ```cpp
+/// int tab_drawn = 0;
+/// auto container = Container::Tab(&tab_drawn, {
+///   children_1,
+///   children_2,
+///   children_3,
+///   children_4,
+/// });
+/// ```
+Component Tab(int* selector, Components children) {
+  return ContainerBase::Tab(selector, std::move(children));
 }
 
+}  // namespace Container
+
 // static
-Component Container::Vertical() {
+Component ContainerBase::Vertical() {
   return Vertical({});
 }
 
 // static
-Component Container::Vertical(Components children) {
+Component ContainerBase::Vertical(Components children) {
   auto container = std::make_shared<Container>();
-  container->event_handler_ = &Container::VerticalEvent;
-  container->render_handler_ = &Container::VerticalRender;
+  container->event_handler_ = &ContainerBase::VerticalEvent;
+  container->render_handler_ = &ContainerBase::VerticalRender;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
 }
 
 // static
-Component Container::Horizontal() {
+Component ContainerBase::Horizontal() {
   return Horizontal({});
 }
 
 // static
-Component Container::Horizontal(Components children) {
+Component ContainerBase::Horizontal(Components children) {
   auto container = std::make_shared<Container>();
-  container->event_handler_ = &Container::HorizontalEvent;
-  container->render_handler_ = &Container::HorizontalRender;
+  container->event_handler_ = &ContainerBase::HorizontalEvent;
+  container->render_handler_ = &ContainerBase::HorizontalRender;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
 }
 
 // static
-Component Container::Tab(int* selector) {
+Component ContainerBase::Tab(int* selector) {
   return Tab(selector, {});
 }
 
 // static
-Component Container::Tab(int* selector, Components children) {
+Component ContainerBase::Tab(int* selector, Components children) {
   auto container = std::make_shared<Container>();
   container->selector_ = selector;
-  container->event_handler_ = &Container::TabEvent;
-  container->render_handler_ = &Container::TabRender;
+  container->event_handler_ = &ContainerBase::TabEvent;
+  container->render_handler_ = &ContainerBase::TabRender;
   for (Component& child : children)
     container->Add(std::move(child));
   return container;
 }
 
-bool Container::OnEvent(Event event) {
+bool ContainerBase::OnEvent(Event event) {
   if (event.is_mouse())
     return OnMouseEvent(event);
 
@@ -80,7 +135,7 @@ bool Container::OnEvent(Event event) {
   return (this->*event_handler_)(event);
 }
 
-Component Container::ActiveChild() {
+Component ContainerBase::ActiveChild() {
   if (children_.size() == 0)
     return nullptr;
 
@@ -88,7 +143,7 @@ Component Container::ActiveChild() {
   return children_[selected % children_.size()];
 }
 
-void Container::SetActiveChild(ComponentBase* child) {
+void ContainerBase::SetActiveChild(ComponentBase* child) {
   for (size_t i = 0; i < children_.size(); ++i) {
     if (children_[i].get() == child) {
       (selector_ ? *selector_ : selected_) = i;
@@ -97,7 +152,7 @@ void Container::SetActiveChild(ComponentBase* child) {
   }
 }
 
-bool Container::VerticalEvent(Event event) {
+bool ContainerBase::VerticalEvent(Event event) {
   int old_selected = selected_;
   if (event == Event::ArrowUp || event == Event::Character('k'))
     selected_--;
@@ -112,7 +167,7 @@ bool Container::VerticalEvent(Event event) {
   return old_selected != selected_;
 }
 
-bool Container::HorizontalEvent(Event event) {
+bool ContainerBase::HorizontalEvent(Event event) {
   int old_selected = selected_;
   if (event == Event::ArrowLeft || event == Event::Character('h'))
     selected_--;
@@ -127,11 +182,11 @@ bool Container::HorizontalEvent(Event event) {
   return old_selected != selected_;
 }
 
-Element Container::Render() {
+Element ContainerBase::Render() {
   return (this->*render_handler_)();
 }
 
-Element Container::VerticalRender() {
+Element ContainerBase::VerticalRender() {
   Elements elements;
   for (auto& it : children_)
     elements.push_back(it->Render());
@@ -140,7 +195,7 @@ Element Container::VerticalRender() {
   return vbox(std::move(elements));
 }
 
-Element Container::HorizontalRender() {
+Element ContainerBase::HorizontalRender() {
   Elements elements;
   for (auto& it : children_)
     elements.push_back(it->Render());
@@ -149,14 +204,14 @@ Element Container::HorizontalRender() {
   return hbox(std::move(elements));
 }
 
-Element Container::TabRender() {
+Element ContainerBase::TabRender() {
   Component active_child = ActiveChild();
   if (active_child)
     return active_child->Render();
   return text(L"Empty container");
 }
 
-bool Container::OnMouseEvent(Event event) {
+bool ContainerBase::OnMouseEvent(Event event) {
   if (selector_)
     return ActiveChild()->OnEvent(event);
 
diff --git a/src/ftxui/component/renderer.cpp b/src/ftxui/component/renderer.cpp
index 27a0c9e4..95fdd9a0 100644
--- a/src/ftxui/component/renderer.cpp
+++ b/src/ftxui/component/renderer.cpp
@@ -27,10 +27,43 @@ class RendererBase : public ComponentBase {
   std::function<Element()> render_;
 };
 
+/// @brief Return a component, using |render| to render its interface.
+/// @param render The function drawing the interface.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// auto renderer = Renderer([] {
+///   return text(L"My interface");
+/// });
+/// screen.Loop(renderer);
+/// ```
 Component Renderer(std::function<Element()> render) {
   return Make<RendererBase>(std::move(render));
 }
 
+/// @brief Return a new Component, similar to |child|, but using |render| as the
+/// Component::Render() event.
+/// @param child The component to forward events to.
+/// @param render The function drawing the interface.
+/// @ingroup component
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// std::wstring label = "Click to quit";
+/// auto button = Button(&label, screen.ExitLoopClosure());
+/// auto renderer = Renderer(button, [&] {
+///   return hbox({
+///     text("A button:"),
+///     button->Render(),
+///   });
+/// });
+/// screen.Loop(renderer);
+/// ```
 Component Renderer(Component child, std::function<Element()> render) {
   Component renderer = Renderer(std::move(render));
   renderer->Add(std::move(child));

From 048efb6912f1551409727304868087ca7e2319f1 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Fri, 14 May 2021 21:43:35 +0200
Subject: [PATCH 5/8] Add {Const,}StringRef to simplify components.

---
 examples/component/button.cpp            | 15 +++++-----
 examples/component/checkbox.cpp          | 17 ++++--------
 examples/component/checkbox_in_frame.cpp | 20 ++++++--------
 examples/component/gallery.cpp           | 19 ++++++-------
 examples/component/homescreen.cpp        | 23 +++++++---------
 examples/component/input.cpp             | 13 ++++-----
 examples/component/menu2.cpp             |  9 +++---
 examples/component/menu_style.cpp        |  9 +++---
 examples/component/modal_dialog.cpp      | 16 ++++-------
 examples/component/radiobox_in_frame.cpp |  3 +-
 examples/component/slider.cpp            |  2 --
 examples/component/slider_rgb.cpp        | 13 ++++-----
 examples/component/tab_horizontal.cpp    | 11 ++++----
 examples/component/tab_vertical.cpp      | 13 ++++-----
 examples/component/toggle.cpp            | 11 +++-----
 include/ftxui/component/button.hpp       |  5 ++--
 include/ftxui/component/checkbox.hpp     | 11 ++++----
 include/ftxui/component/component.hpp    | 10 ++++---
 include/ftxui/component/input.hpp        |  7 +++--
 include/ftxui/screen/string.hpp          | 35 ++++++++++++++++++++++++
 src/ftxui/component/button.cpp           |  5 ++--
 src/ftxui/component/checkbox.cpp         |  4 +--
 src/ftxui/component/container.cpp        | 12 ++++----
 src/ftxui/component/container_test.cpp   | 26 +++++++++---------
 src/ftxui/component/input.cpp            |  5 ++--
 src/ftxui/component/input_test.cpp       |  7 +++--
 src/ftxui/component/renderer.cpp         |  5 ++--
 src/ftxui/component/slider.cpp           | 15 +++++-----
 src/ftxui/screen/string.cpp              | 24 ++++++++++++++++
 29 files changed, 201 insertions(+), 164 deletions(-)

diff --git a/examples/component/button.cpp b/examples/component/button.cpp
index 6382890f..5bc78521 100644
--- a/examples/component/button.cpp
+++ b/examples/component/button.cpp
@@ -1,20 +1,21 @@
-#include <string>  // for operator+, to_wstring, allocator, wstring
+#include <memory>  // for __shared_ptr_access, shared_ptr
+#include <string>  // for operator+, to_wstring
 
-#include "ftxui/component/component.hpp"           // for Button, Make
-#include "ftxui/component/container.hpp"           // for Container
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, Element, gauge, text, operator|, vbox, border
 
 using namespace ftxui;
 
 int main(int argc, const char* argv[]) {
   int value = 50;
-  std::wstring label_dec = L"decrease";
-  std::wstring label_inc = L"increase";
 
   // The tree of components. This defines how to navigate using the keyboard.
   auto buttons = Container::Horizontal({
-      Button(&label_dec, [&] { value--; }),
-      Button(&label_inc, [&] { value++; }),
+      Button("Decrease", [&] { value--; }),
+      Button("Increase", [&] { value++; }),
   });
 
   // Modify the way to render them on screen:
diff --git a/examples/component/checkbox.cpp b/examples/component/checkbox.cpp
index cd2637eb..361ee683 100644
--- a/examples/component/checkbox.cpp
+++ b/examples/component/checkbox.cpp
@@ -1,24 +1,19 @@
 #include "ftxui/component/checkbox.hpp"
-#include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Checkbox, Make
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Checkbox, Vertical
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 
 using namespace ftxui;
 
 int main(int argc, const char* argv[]) {
-  std::wstring build_examples_label = L"Build examples";
-  std::wstring build_tests_label = L"Build tests";
-  std::wstring use_webassembly_label = L"Use WebAssembly";
-
   bool build_examples_state = false;
   bool build_tests_state = false;
   bool use_webassembly_state = true;
 
   auto component = Container::Vertical({
-      Checkbox(&build_examples_label, &build_examples_state),
-      Checkbox(&build_tests_label, &build_tests_state),
-      Checkbox(&use_webassembly_label, &use_webassembly_state),
+      Checkbox("Build examples", &build_examples_state),
+      Checkbox("Build tests", &build_tests_state),
+      Checkbox("Use WebAssembly", &use_webassembly_state),
   });
 
   auto screen = ScreenInteractive::TerminalOutput();
diff --git a/examples/component/checkbox_in_frame.cpp b/examples/component/checkbox_in_frame.cpp
index 75b30dee..26f405bb 100644
--- a/examples/component/checkbox_in_frame.cpp
+++ b/examples/component/checkbox_in_frame.cpp
@@ -1,18 +1,17 @@
-#include <memory>  // for unique_ptr, make_unique, __shared_ptr_access
-#include <string>  // for operator+, wstring
+#include <memory>  // for __shared_ptr_access, allocator_traits<>::value_type, shared_ptr
+#include <string>  // for operator+
 #include <vector>  // for vector
 
-#include "ftxui/component/component.hpp"       // for Checkbox, Make
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for Element, operator|, size, vbox, border, frame, Elements, HEIGHT, LESS_THAN
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, operator|, size, border, frame, HEIGHT, LESS_THAN
 #include "ftxui/screen/string.hpp"  // for to_wstring
 
 using namespace ftxui;
 
 struct CheckboxState {
-  std::wstring label;
   bool checked;
 };
 
@@ -20,10 +19,9 @@ int main(int argc, const char* argv[]) {
   int size = 30;
   std::vector<CheckboxState> states(size);
   auto container = Container::Vertical({});
-  for(int i = 0; i<size; ++i) {
+  for (int i = 0; i < size; ++i) {
     states[i].checked = false;
-    states[i].label = L"Checkbox " + to_wstring(i);
-    container->Add(Checkbox(&states[i].label, &states[i].checked));
+    container->Add(Checkbox(L"Checkbox" + to_wstring(i), &states[i].checked));
   }
 
   auto component = Renderer(container, [&] {
diff --git a/examples/component/gallery.cpp b/examples/component/gallery.cpp
index 1d3564e8..99f5af4c 100644
--- a/examples/component/gallery.cpp
+++ b/examples/component/gallery.cpp
@@ -1,14 +1,13 @@
 #include <functional>  // for function
-#include <memory>      // for allocator, __shared_ptr_access
+#include <memory>      // for shared_ptr, allocator, __shared_ptr_access
 #include <string>      // for wstring, basic_string
 #include <vector>      // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Slider, Checkbox, Button, Input, Make, Menu, Radiobox, Toggle
+#include "ftxui/component/component.hpp"  // for Slider, Checkbox, Vertical, Renderer, Button, Input, Menu, Radiobox, Toggle
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for separator, operator|, Element, size, xflex, text, WIDTH, hbox, vbox, EQUAL, LESS_THAN, border, GREATER_THAN
+#include "ftxui/dom/elements.hpp"  // for separator, Element, operator|, size, xflex, text, WIDTH, hbox, vbox, EQUAL, border, GREATER_THAN
 
 using namespace ftxui;
 
@@ -27,7 +26,8 @@ Component Wrap(std::wstring name, Component component) {
 int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
 
-  // -- Menu ----------------------------------------------------------------------
+  // -- Menu
+  // ----------------------------------------------------------------------
   const std::vector<std::wstring> menu_entries = {
       L"Menu 1",
       L"Menu 2",
@@ -48,14 +48,12 @@ int main(int argc, const char* argv[]) {
   toggle = Wrap(L"Toggle", toggle);
 
   // -- Checkbox ---------------------------------------------------------------
-  std::wstring checkbox_1_label = L"checkbox1";
-  std::wstring checkbox_2_label = L"checkbox2";
   bool checkbox_1_selected = false;
   bool checkbox_2_selected = false;
 
   auto checkboxes = Container::Vertical({
-      Checkbox(&checkbox_1_label, &checkbox_1_selected),
-      Checkbox(&checkbox_2_label, &checkbox_2_selected),
+      Checkbox("checkbox1", &checkbox_1_selected),
+      Checkbox("checkbox2", &checkbox_2_selected),
   });
   checkboxes = Wrap(L"Checkbox", checkboxes);
 
@@ -72,8 +70,7 @@ int main(int argc, const char* argv[]) {
 
   // -- Input ------------------------------------------------------------------
   std::wstring input_label;
-  std::wstring input_placeholder = L"input";
-  auto input = Input(&input_label, &input_placeholder);
+  auto input = Input(&input_label, L"placeholder");
   input = Wrap(L"Input", input);
 
   // -- Button -----------------------------------------------------------------
diff --git a/examples/component/homescreen.cpp b/examples/component/homescreen.cpp
index 876c3c22..6758e241 100644
--- a/examples/component/homescreen.cpp
+++ b/examples/component/homescreen.cpp
@@ -2,20 +2,19 @@
 #include <chrono>      // for operator""s, chrono_literals
 #include <cmath>       // for sin
 #include <functional>  // for ref, reference_wrapper, function
-#include <memory>      // for make_shared, __shared_ptr_access
-#include <string>  // for allocator, wstring, basic_string, operator+, to_wstring
-#include <thread>   // for sleep_for, thread
-#include <utility>  // for move
-#include <vector>   // for vector
+#include <memory>      // for allocator, shared_ptr, __shared_ptr_access
+#include <string>      // for wstring, basic_string, operator+, to_wstring
+#include <thread>      // for sleep_for, thread
+#include <utility>     // for move
+#include <vector>      // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Checkbox, Input, Menu, Radiobox, Toggle
+#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, Tab, Toggle
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/event.hpp"           // for Event, Event::Custom
 #include "ftxui/component/input.hpp"           // for InputBase
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for text, operator|, color, bgcolor, Element, filler, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, Elements, HEIGHT, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
+#include "ftxui/dom/elements.hpp"  // for text, operator|, color, bgcolor, Element, filler, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, HEIGHT, Elements, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
 #include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
 
 using namespace ftxui;
@@ -157,17 +156,15 @@ int main(int argc, const char* argv[]) {
       false,
       false,
   };
-  std::wstring input_add_content = L"";
-  std::wstring input_add_placeholder = L"input_files";
-  Component input_add = Input(&input_add_content, &input_add_placeholder);
+  std::wstring input_add_content;
+  Component input_add = Input(&input_add_content, "input files");
 
   std::vector<std::wstring> input_entries;
   int input_selected = 0;
   Component input = Menu(&input_entries, &input_selected);
 
   std::wstring executable_content_ = L"";
-  std::wstring executable_placeholder_ = L"executable";
-  Component executable_ = Input(&executable_content_, &executable_placeholder_);
+  Component executable_ = Input(&executable_content_, "executable");
 
   Component flags = Container::Vertical({
       Checkbox(&options_label[0], &options_state[0]),
diff --git a/examples/component/input.cpp b/examples/component/input.cpp
index e9d2841b..c5a31c2f 100644
--- a/examples/component/input.cpp
+++ b/examples/component/input.cpp
@@ -1,23 +1,20 @@
 #include <memory>  // for allocator, __shared_ptr_access
-#include <string>  // for operator+, wstring, char_traits
+#include <string>  // for operator+, char_traits, wstring
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Input, Make
+#include "ftxui/component/component.hpp"       // for Input, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for text, hbox, separator, border, vbox, Element
+#include "ftxui/dom/elements.hpp"  // for text, hbox, Element, separator, operator|, vbox, border
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
 
   std::wstring first_name_;
   std::wstring last_name_;
-  std::wstring first_name_placeholder_ = L"first_name";
-  std::wstring last_name_placeholder_ = L"last_name";
 
-  Component input_first_name_ = Input(&first_name_, &first_name_placeholder_);
-  Component input_last_name_ = Input(&last_name_, &last_name_placeholder_);
+  Component input_first_name_ = Input(&first_name_, "first name");
+  Component input_last_name_ = Input(&last_name_, "last name");
 
   auto component = Container::Vertical({
       input_first_name_,
diff --git a/examples/component/menu2.cpp b/examples/component/menu2.cpp
index 8bb71a45..82f71213 100644
--- a/examples/component/menu2.cpp
+++ b/examples/component/menu2.cpp
@@ -1,12 +1,11 @@
 #include <functional>  // for function
-#include <memory>      // for __shared_ptr_access, shared_ptr
-#include <string>  // for wstring, allocator, operator+, to_string, basic_string
-#include <vector>  // for vector
+#include <memory>      // for allocator, __shared_ptr_access
+#include <string>      // for wstring, operator+, to_string, basic_string
+#include <vector>      // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Menu, Make
+#include "ftxui/component/component.hpp"       // for Menu, Horizontal, Renderer
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/menu.hpp"            // for MenuBase
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for text, separator, bold, hcenter, vbox, hbox, gauge, Element, operator|, border
diff --git a/examples/component/menu_style.cpp b/examples/component/menu_style.cpp
index 65a0dce9..4be8f088 100644
--- a/examples/component/menu_style.cpp
+++ b/examples/component/menu_style.cpp
@@ -1,15 +1,14 @@
 #include <functional>        // for function
 #include <initializer_list>  // for initializer_list
-#include <memory>            // for __shared_ptr_access
-#include <string>            // for wstring, allocator, basic_string
+#include <memory>            // for __shared_ptr_access, shared_ptr, allocator
+#include <string>            // for wstring, basic_string
 #include <vector>            // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Menu, Make
+#include "ftxui/component/component.hpp"       // for Menu, Horizontal, Renderer
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
 #include "ftxui/component/menu.hpp"            // for MenuBase
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, separator, bgcolor, color, flex, Decorator, bold, hbox, border, dim
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::BlueLight, Color::Red, Color::Yellow
 
diff --git a/examples/component/modal_dialog.cpp b/examples/component/modal_dialog.cpp
index 91317dee..7db37582 100644
--- a/examples/component/modal_dialog.cpp
+++ b/examples/component/modal_dialog.cpp
@@ -1,13 +1,11 @@
-#include <functional>  // for function
-#include <memory>  // for allocator, __shared_ptr_access, shared_ptr, make_shared
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
 #include <string>  // for wstring, operator+, basic_string, char_traits
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Button, Make
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/component/component.hpp"  // for Button, Renderer, Horizontal, Tab
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for Element, operator|, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
 
 int main(int argc, const char* argv[]) {
@@ -21,10 +19,8 @@ int main(int argc, const char* argv[]) {
   std::wstring rating = L"3/5 stars";
 
   // At depth=0, two buttons. One for rating FTXUI and one for quitting.
-  std::wstring label_rate_ftxui = L"Rate FTXUI";
-  std::wstring label_quit = L"Quit";
-  auto button_rate_ftxui = Button(&label_rate_ftxui, [&] { depth = 1; });
-  auto button_quit = Button(&label_quit, screen.ExitLoopClosure());
+  auto button_rate_ftxui = Button("Rate FTXUI", [&] { depth = 1; });
+  auto button_quit = Button("Quit", screen.ExitLoopClosure());
 
   auto depth_0_container = Container::Horizontal({
       button_rate_ftxui,
diff --git a/examples/component/radiobox_in_frame.cpp b/examples/component/radiobox_in_frame.cpp
index ff5514ee..b62d0d32 100644
--- a/examples/component/radiobox_in_frame.cpp
+++ b/examples/component/radiobox_in_frame.cpp
@@ -1,8 +1,9 @@
+#include <memory>  // for __shared_ptr_access, shared_ptr
 #include <string>  // for wstring, operator+
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"      // for ftxui
-#include "ftxui/component/component.hpp"           // for Make, Radiobox
+#include "ftxui/component/component.hpp"           // for Radiobox, Renderer
 #include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for Element, operator|, size, border, frame, HEIGHT, LESS_THAN
diff --git a/examples/component/slider.cpp b/examples/component/slider.cpp
index 7a3f51ed..c4b41b67 100644
--- a/examples/component/slider.cpp
+++ b/examples/component/slider.cpp
@@ -1,5 +1,3 @@
-#include <memory>  // for allocator
-
 #include "ftxui/component/captured_mouse.hpp"      // for ftxui
 #include "ftxui/component/component.hpp"           // for Slider
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
diff --git a/examples/component/slider_rgb.cpp b/examples/component/slider_rgb.cpp
index 07f4b00b..3eb10e6b 100644
--- a/examples/component/slider_rgb.cpp
+++ b/examples/component/slider_rgb.cpp
@@ -1,14 +1,11 @@
-#include <functional>  // for function
-#include <memory>      // for allocator, __shared_ptr_access
-#include <string>      // for operator+, to_wstring, char_traits
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
+#include <string>  // for operator+, to_wstring, char_traits
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Slider, Make
+#include "ftxui/component/component.hpp"       // for Slider, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/event.hpp"  // for Event, Event::Escape, Event::Return
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for separator, operator|, Element, size, text, vbox, xflex, bgcolor, hbox, GREATER_THAN, WIDTH, border, HEIGHT, LESS_THAN
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, Element, operator|, size, text, vbox, xflex, bgcolor, hbox, GREATER_THAN, WIDTH, border, HEIGHT, LESS_THAN
 #include "ftxui/screen/color.hpp"  // for Color
 
 using namespace ftxui;
diff --git a/examples/component/tab_horizontal.cpp b/examples/component/tab_horizontal.cpp
index 5b849c19..578dff28 100644
--- a/examples/component/tab_horizontal.cpp
+++ b/examples/component/tab_horizontal.cpp
@@ -1,12 +1,11 @@
-#include <memory>  // for __shared_ptr_access
-#include <string>  // for wstring, allocator, basic_string
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
+#include <string>  // for wstring, basic_string
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Radiobox, Make, Toggle
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/component/component.hpp"  // for Radiobox, Renderer, Tab, Toggle, Vertical
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for Element, separator, operator|, vbox, border
 
 using namespace ftxui;
diff --git a/examples/component/tab_vertical.cpp b/examples/component/tab_vertical.cpp
index f2c6c5f4..ad454d73 100644
--- a/examples/component/tab_vertical.cpp
+++ b/examples/component/tab_vertical.cpp
@@ -1,13 +1,12 @@
-#include <memory>  // for __shared_ptr_access
-#include <string>  // for wstring, allocator, basic_string
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
+#include <string>  // for wstring, basic_string
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Radiobox, Make, Toggle
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for Element, separator, operator|, vbox, border
+#include "ftxui/component/component.hpp"  // for Radiobox, Horizontal, Menu, Renderer, Tab
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Element, separator, hbox, operator|, border
 
 using namespace ftxui;
 
diff --git a/examples/component/toggle.cpp b/examples/component/toggle.cpp
index 6159d438..b56f2115 100644
--- a/examples/component/toggle.cpp
+++ b/examples/component/toggle.cpp
@@ -1,13 +1,10 @@
-#include <functional>  // for function
-#include <memory>      // for allocator, __shared_ptr_access
-#include <string>      // for wstring, basic_string
-#include <vector>      // for vector
+#include <memory>  // for allocator, __shared_ptr_access
+#include <string>  // for wstring, basic_string
+#include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Toggle, Make
+#include "ftxui/component/component.hpp"       // for Toggle, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/container.hpp"       // for Container
-#include "ftxui/component/event.hpp"           // for Event, Event::Return
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for text, hbox, vbox, Element
 
diff --git a/include/ftxui/component/button.hpp b/include/ftxui/component/button.hpp
index 073dbdcc..86388236 100644
--- a/include/ftxui/component/button.hpp
+++ b/include/ftxui/component/button.hpp
@@ -8,6 +8,7 @@
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/dom/elements.hpp"              // for Element
 #include "ftxui/screen/box.hpp"                // for Box
+#include "ftxui/screen/string.hpp"             // for ConstStringRef
 
 namespace ftxui {
 struct Event;
@@ -20,7 +21,7 @@ class ButtonBase : public ComponentBase {
   static ButtonBase* From(Component);
 
   // Constructor.
-  ButtonBase(const std::wstring* label, std::function<void()> on_click);
+  ButtonBase(ConstStringRef label, std::function<void()> on_click);
   ~ButtonBase() override = default;
 
   // Component implementation.
@@ -28,7 +29,7 @@ class ButtonBase : public ComponentBase {
   bool OnEvent(Event) override;
 
  private:
-  const std::wstring* label_;
+  ConstStringRef label_;
   std::function<void()> on_click_;
   Box box_;
 };
diff --git a/include/ftxui/component/checkbox.hpp b/include/ftxui/component/checkbox.hpp
index fd7959e7..9cd1db45 100644
--- a/include/ftxui/component/checkbox.hpp
+++ b/include/ftxui/component/checkbox.hpp
@@ -2,12 +2,13 @@
 #define FTXUI_COMPONENT_CHECKBOX_HPP
 
 #include <functional>  // for function
-#include <string>      // for wstring, allocator
+#include <string>      // for allocator, wstring
 
 #include "ftxui/component/component.hpp"       // for Component
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/dom/elements.hpp"  // for Element, Decorator, inverted, nothing
-#include "ftxui/screen/box.hpp"    // for Box
+#include "ftxui/dom/elements.hpp"   // for Element, Decorator, inverted, nothing
+#include "ftxui/screen/box.hpp"     // for Box
+#include "ftxui/screen/string.hpp"  // for ConstStringRef
 
 namespace ftxui {
 struct Event;
@@ -21,7 +22,7 @@ class CheckboxBase : public ComponentBase {
   static CheckboxBase* From(Component component);
 
   // Constructor.
-  CheckboxBase(const std::wstring* label, bool* state);
+  CheckboxBase(ConstStringRef label, bool* state);
   ~CheckboxBase() override = default;
 
 #if defined(_WIN32)
@@ -45,7 +46,7 @@ class CheckboxBase : public ComponentBase {
  private:
   bool OnMouseEvent(Event event);
 
-  const std::wstring* const label_;
+  ConstStringRef label_;
   bool* const state_;
   int cursor_position = 0;
   Box box_;
diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp
index 47e942c7..cebbc540 100644
--- a/include/ftxui/component/component.hpp
+++ b/include/ftxui/component/component.hpp
@@ -7,6 +7,8 @@
 #include <vector>      // for vector
 
 #include "ftxui/component/component_base.hpp"
+#include "ftxui/dom/elements.hpp"   // for Element
+#include "ftxui/screen/string.hpp"  // for ConstStringRef, StringRef
 
 namespace ftxui {
 
@@ -20,9 +22,9 @@ std::shared_ptr<T> Make(Args&&... args) {
   return std::make_shared<T>(args...);
 }
 
-Component Button(const std::wstring* label, std::function<void()> on_click);
-Component Checkbox(const std::wstring* label, bool* checked);
-Component Input(std::wstring* content, const std::wstring* placeholder);
+Component Button(ConstStringRef label, std::function<void()> on_click);
+Component Checkbox(ConstStringRef label, bool* checked);
+Component Input(StringRef content, ConstStringRef placeholder);
 Component Menu(const std::vector<std::wstring>* entries, int* selected_);
 Component Radiobox(const std::vector<std::wstring>* entries, int* selected_);
 Component Toggle(const std::vector<std::wstring>* entries, int* selected);
@@ -30,7 +32,7 @@ Component Renderer(Component child, std::function<Element()>);
 Component Renderer(std::function<Element()>);
 
 template <class T>  // T = {int, float}
-Component Slider(std::wstring label, T* value, T min, T max, T increment);
+Component Slider(StringRef label, T* value, T min, T max, T increment);
 
 namespace Container {
 Component Vertical(Components children);
diff --git a/include/ftxui/component/input.hpp b/include/ftxui/component/input.hpp
index fdfc2af5..605db998 100644
--- a/include/ftxui/component/input.hpp
+++ b/include/ftxui/component/input.hpp
@@ -8,6 +8,7 @@
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/dom/elements.hpp"              // for Element
 #include "ftxui/screen/box.hpp"                // for Box
+#include "ftxui/screen/string.hpp"             // for ConstStringRef, StringRef
 
 namespace ftxui {
 struct Event;
@@ -20,7 +21,7 @@ class InputBase : public ComponentBase {
   static InputBase* From(Component component);
 
   // Constructor.
-  InputBase(std::wstring* content, const std::wstring* placeholder);
+  InputBase(StringRef content, ConstStringRef placeholder);
   ~InputBase() override = default;
 
   // State.
@@ -35,8 +36,8 @@ class InputBase : public ComponentBase {
   bool OnEvent(Event) override;
 
  private:
-  std::wstring* const content_;
-  const std::wstring* const placeholder_;
+  StringRef content_;
+  ConstStringRef placeholder_;
 
   bool OnMouseEvent(Event);
   Box input_box_;
diff --git a/include/ftxui/screen/string.hpp b/include/ftxui/screen/string.hpp
index 86899cc5..2d199bca 100644
--- a/include/ftxui/screen/string.hpp
+++ b/include/ftxui/screen/string.hpp
@@ -16,6 +16,41 @@ int wchar_width(wchar_t);
 int wchar_width_cjk(wchar_t);
 int wstring_width(const std::wstring&);
 int wstring_width_cjk(const std::wstring&);
+
+/// @brief For convenience, this class convert multiple mutable string
+/// references toward a shared representation.
+class StringRef {
+ public:
+  StringRef(std::wstring& ref);
+  StringRef(std::wstring* ref);
+  StringRef(const wchar_t* ref);
+  StringRef(const char* ref);
+
+  std::wstring& operator*();
+  std::wstring* operator->();
+
+ private:
+  std::wstring* const borrowed_ = nullptr;
+  std::wstring owned_;
+};
+
+/// @brief For convenience, this class convert multiple immutable string
+/// references toward  shared representation.
+class ConstStringRef {
+ public:
+  ConstStringRef(const std::wstring& ref);
+  ConstStringRef(const std::wstring* ref);
+  ConstStringRef(const wchar_t* ref);
+  ConstStringRef(const char* ref);
+
+  const std::wstring& operator*();
+  const std::wstring* operator->();
+
+ private:
+  const std::wstring* const borrowed_ = nullptr;
+  const std::wstring owned_;
+};
+
 }  // namespace ftxui
 
 #endif /* end of include guard: FTXUI_SCREEN_STRING_HPP */
diff --git a/src/ftxui/component/button.cpp b/src/ftxui/component/button.cpp
index 98768792..5ed0ce09 100644
--- a/src/ftxui/component/button.cpp
+++ b/src/ftxui/component/button.cpp
@@ -31,7 +31,7 @@ namespace ftxui {
 /// │Click to quit│
 /// └─────────────┘
 /// ```
-Component Button(const std::wstring* label, std::function<void()> on_click) {
+Component Button(ConstStringRef label, std::function<void()> on_click) {
   return Make<ButtonBase>(label, on_click);
 }
 
@@ -40,8 +40,7 @@ ButtonBase* ButtonBase::From(Component component) {
   return static_cast<ButtonBase*>(component.get());
 }
 
-ButtonBase::ButtonBase(const std::wstring* label,
-                       std::function<void()> on_click)
+ButtonBase::ButtonBase(ConstStringRef label, std::function<void()> on_click)
     : label_(label), on_click_(on_click) {}
 
 Element ButtonBase::Render() {
diff --git a/src/ftxui/component/checkbox.cpp b/src/ftxui/component/checkbox.cpp
index 011293f3..d440bdab 100644
--- a/src/ftxui/component/checkbox.cpp
+++ b/src/ftxui/component/checkbox.cpp
@@ -30,7 +30,7 @@ namespace ftxui {
 /// ```bash
 /// ☐ Make a sandwitch
 /// ```
-Component Checkbox(const std::wstring* label, bool* checked) {
+Component Checkbox(ConstStringRef label, bool* checked) {
   return Make<CheckboxBase>(label, checked);
 }
 
@@ -39,7 +39,7 @@ CheckboxBase* From(Component component) {
   return static_cast<CheckboxBase*>(component.get());
 }
 
-CheckboxBase::CheckboxBase(const std::wstring* label, bool* state)
+CheckboxBase::CheckboxBase(ConstStringRef label, bool* state)
     : label_(label), state_(state) {}
 
 Element CheckboxBase::Render() {
diff --git a/src/ftxui/component/container.cpp b/src/ftxui/component/container.cpp
index 3dc9fdf0..a9d372b2 100644
--- a/src/ftxui/component/container.cpp
+++ b/src/ftxui/component/container.cpp
@@ -15,7 +15,7 @@ namespace Container {
 /// vertically using up/down arrow key or 'j'/'k' keys.
 /// @param children the list of components.
 /// @ingroup component
-/// @see ContainerBase 
+/// @see ContainerBase
 ///
 /// ### Example
 ///
@@ -35,7 +35,7 @@ Component Vertical(Components children) {
 /// horizontally using left/right arrow key or 'h'/'l' keys.
 /// @param children the list of components.
 /// @ingroup component
-/// @see ContainerBase 
+/// @see ContainerBase
 ///
 /// ### Example
 ///
@@ -57,7 +57,7 @@ Component Horizontal(Components children) {
 /// @param selector The index of the drawn children.
 /// @param children the list of components.
 /// @ingroup component
-/// @see ContainerBase 
+/// @see ContainerBase
 ///
 /// ### Example
 ///
@@ -83,7 +83,7 @@ Component ContainerBase::Vertical() {
 
 // static
 Component ContainerBase::Vertical(Components children) {
-  auto container = std::make_shared<Container>();
+  auto container = std::make_shared<ContainerBase>();
   container->event_handler_ = &ContainerBase::VerticalEvent;
   container->render_handler_ = &ContainerBase::VerticalRender;
   for (Component& child : children)
@@ -98,7 +98,7 @@ Component ContainerBase::Horizontal() {
 
 // static
 Component ContainerBase::Horizontal(Components children) {
-  auto container = std::make_shared<Container>();
+  auto container = std::make_shared<ContainerBase>();
   container->event_handler_ = &ContainerBase::HorizontalEvent;
   container->render_handler_ = &ContainerBase::HorizontalRender;
   for (Component& child : children)
@@ -113,7 +113,7 @@ Component ContainerBase::Tab(int* selector) {
 
 // static
 Component ContainerBase::Tab(int* selector, Components children) {
-  auto container = std::make_shared<Container>();
+  auto container = std::make_shared<ContainerBase>();
   container->selector_ = selector;
   container->event_handler_ = &ContainerBase::TabEvent;
   container->render_handler_ = &ContainerBase::TabRender;
diff --git a/src/ftxui/component/container_test.cpp b/src/ftxui/component/container_test.cpp
index c4f4571c..13cc19f5 100644
--- a/src/ftxui/component/container_test.cpp
+++ b/src/ftxui/component/container_test.cpp
@@ -9,7 +9,7 @@
 using namespace ftxui;
 
 TEST(ContainerTest, HorizontalEvent) {
-  auto container = Container::Horizontal();
+  auto container = ContainerBase::Horizontal();
   Component c0, c1, c2;
   container->Add(c0);
   container->Add(c1);
@@ -80,7 +80,7 @@ TEST(ContainerTest, HorizontalEvent) {
 }
 
 TEST(ContainerTest, VerticalEvent) {
-  auto container = Container::Vertical();
+  auto container = ContainerBase::Vertical();
   Component c0, c1, c2;
   container->Add(c0);
   container->Add(c1);
@@ -151,7 +151,7 @@ TEST(ContainerTest, VerticalEvent) {
 }
 
 TEST(ContainerTest, SetActiveChild) {
-  auto container = Container::Horizontal();
+  auto container = ContainerBase::Horizontal();
   Component c0, c1, c2;
   container->Add(c0);
   container->Add(c1);
@@ -203,16 +203,16 @@ TEST(ContainerTest, SetActiveChild) {
 }
 
 TEST(ContainerTest, TakeFocus) {
-  auto c = Container::Horizontal();
-  auto c1 = Container::Vertical();
-  auto c2 = Container::Vertical();
-  auto c3 = Container::Vertical();
-  auto c11 = Container::Horizontal();
-  auto c12 = Container::Horizontal();
-  auto c13 = Container::Horizontal();
-  auto c21 = Container::Horizontal();
-  auto c22 = Container::Horizontal();
-  auto c23 = Container::Horizontal();
+  auto c = ContainerBase::Horizontal();
+  auto c1 = ContainerBase::Vertical();
+  auto c2 = ContainerBase::Vertical();
+  auto c3 = ContainerBase::Vertical();
+  auto c11 = ContainerBase::Horizontal();
+  auto c12 = ContainerBase::Horizontal();
+  auto c13 = ContainerBase::Horizontal();
+  auto c21 = ContainerBase::Horizontal();
+  auto c22 = ContainerBase::Horizontal();
+  auto c23 = ContainerBase::Horizontal();
 
   c->Add(c1);
   c->Add(c2);
diff --git a/src/ftxui/component/input.cpp b/src/ftxui/component/input.cpp
index 35a162f7..3ecaa3a0 100644
--- a/src/ftxui/component/input.cpp
+++ b/src/ftxui/component/input.cpp
@@ -1,5 +1,6 @@
 #include <algorithm>  // for max, min
 #include <memory>     // for shared_ptr
+#include <string>     // for wstring, allocator, basic_string
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Backspace, Event::Custom, Event::Delete, Event::End, Event::Home, Event::Return
@@ -30,7 +31,7 @@ namespace ftxui {
 /// ```bash
 /// placeholder
 /// ```
-Component Input(std::wstring* content, const std::wstring* placeholder) {
+Component Input(StringRef content, ConstStringRef placeholder) {
   return Make<InputBase>(content, placeholder);
 }
 
@@ -39,7 +40,7 @@ InputBase* InputBase::From(Component component) {
   return static_cast<InputBase*>(component.get());
 }
 
-InputBase::InputBase(std::wstring* content, const std::wstring* placeholder)
+InputBase::InputBase(StringRef content, ConstStringRef placeholder)
     : content_(content), placeholder_(placeholder) {}
 
 // Component implementation.
diff --git a/src/ftxui/component/input_test.cpp b/src/ftxui/component/input_test.cpp
index c1d1b12f..be982856 100644
--- a/src/ftxui/component/input_test.cpp
+++ b/src/ftxui/component/input_test.cpp
@@ -1,11 +1,12 @@
-#include <gtest/gtest-message.h>    // for Message
-#include <gtest/gtest-test-part.h>  // for TestPartResult
+#include <gtest/gtest-message.h>  // for Message
+#include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
 #include <memory>                   // for __shared_ptr_access
+#include <string>                   // for wstring, allocator
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight, Event::Backspace, Event::Delete, Event::End, Event::Home
 #include "ftxui/component/input.hpp"
-#include "gtest/gtest_pred_impl.h"  // for Test, EXPECT_EQ, SuiteApiResolver, TEST, TestFactoryImpl
+#include "gtest/gtest_pred_impl.h"  // for Test, EXPECT_EQ, TEST
 
 using namespace ftxui;
 
diff --git a/src/ftxui/component/renderer.cpp b/src/ftxui/component/renderer.cpp
index 95fdd9a0..0125b803 100644
--- a/src/ftxui/component/renderer.cpp
+++ b/src/ftxui/component/renderer.cpp
@@ -1,7 +1,8 @@
 #include <functional>  // for function
-#include <memory>      // for shared_ptr
+#include <memory>      // for __shared_ptr_access
+#include <utility>     // for move
 
-#include "ftxui/component/component.hpp"       // for Make
+#include "ftxui/component/component.hpp"       // for Component, Make, Renderer
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/dom/elements.hpp"              // for Element
 
diff --git a/src/ftxui/component/slider.cpp b/src/ftxui/component/slider.cpp
index 8dbd5385..0ec10915 100644
--- a/src/ftxui/component/slider.cpp
+++ b/src/ftxui/component/slider.cpp
@@ -1,4 +1,4 @@
-#include <string>   // for allocator, wstring
+#include <string>   // for allocator
 #include <utility>  // for move
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
@@ -10,13 +10,14 @@
 #include "ftxui/dom/elements.hpp"  // for Element, text, color, operator|, xflex, gauge, dim, hbox, reflect, underlined, vcenter
 #include "ftxui/screen/box.hpp"    // for Box
 #include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::GrayLight
+#include "ftxui/screen/string.hpp"  // for StringRef
 
 namespace ftxui {
 
 template <class T>
 class SliderBase : public ComponentBase {
  public:
-  SliderBase(std::wstring label, T* value, T min, T max, T increment)
+  SliderBase(StringRef label, T* value, T min, T max, T increment)
       : label_(label),
         value_(value),
         min_(min),
@@ -28,7 +29,7 @@ class SliderBase : public ComponentBase {
         Focused() ? color(Color::GrayLight) : color(Color::GrayDark);
     float percent = float(*value_ - min_) / float(max_ - min_);
     return hbox({
-               text(label_) | dim | vcenter,
+               text(*label_) | dim | vcenter,
                hbox({
                    text(L"["),
                    gauge(percent) | underlined | xflex | reflect(gauge_box_),
@@ -84,7 +85,7 @@ class SliderBase : public ComponentBase {
   }
 
  private:
-  std::wstring label_;
+  StringRef label_;
   T* value_;
   T min_;
   T max_;
@@ -117,17 +118,17 @@ class SliderBase : public ComponentBase {
 /// Value:[██████████████████████████                          ]
 /// ```
 template <class T>
-Component Slider(std::wstring label, T* value, T min, T max, T increment) {
+Component Slider(StringRef label, T* value, T min, T max, T increment) {
   return Make<SliderBase<T>>(std::move(label), value, min, max, increment);
 }
 
-template Component Slider(std::wstring label,
+template Component Slider(StringRef label,
                           int* value,
                           int min,
                           int max,
                           int increment);
 
-template Component Slider(std::wstring label,
+template Component Slider(StringRef label,
                           float* value,
                           float min,
                           float max,
diff --git a/src/ftxui/screen/string.cpp b/src/ftxui/screen/string.cpp
index d0ddcbba..7f13b6b3 100644
--- a/src/ftxui/screen/string.cpp
+++ b/src/ftxui/screen/string.cpp
@@ -25,6 +25,30 @@ std::wstring to_wstring(const std::string& s) {
 #pragma warning(pop)
 #endif
 
+StringRef::StringRef(std::wstring& ref) : borrowed_(&ref) {}
+StringRef::StringRef(std::wstring* ref) : borrowed_(ref) {}
+StringRef::StringRef(const wchar_t* ref) : owned_(ref) {}
+StringRef::StringRef(const char* ref) : owned_(to_wstring(std::string(ref))) {}
+std::wstring& StringRef::operator*() {
+  return borrowed_ ? *borrowed_ : owned_;
+}
+std::wstring* StringRef::operator->() {
+  return borrowed_ ? borrowed_ : &owned_;
+}
+
+ConstStringRef::ConstStringRef(const std::wstring& ref) : borrowed_(&ref) {}
+ConstStringRef::ConstStringRef(const std::wstring* ref) : borrowed_(ref) {}
+ConstStringRef::ConstStringRef(const wchar_t* ref) : owned_(ref) {}
+ConstStringRef::ConstStringRef(const char* ref)
+    : owned_(to_wstring(std::string(ref))) {}
+
+const std::wstring& ConstStringRef::operator*() {
+  return borrowed_ ? *borrowed_ : owned_;
+}
+const std::wstring* ConstStringRef::operator->() {
+  return borrowed_ ? borrowed_ : &owned_;
+}
+
 }  // namespace ftxui
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.

From fcc49fdce7104f52b2104d9c08dd7851f63ab854 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Fri, 14 May 2021 22:00:49 +0200
Subject: [PATCH 6/8] Format using iwyu.

---
 examples/dom/hflow.cpp                        | 15 ++++++++-------
 examples/dom/html_like.cpp                    | 19 ++++++++++---------
 include/ftxui/component/component.hpp         |  3 +--
 include/ftxui/component/receiver.hpp          | 10 ++++++----
 .../ftxui/component/screen_interactive.hpp    | 10 +++++-----
 iwyu.imp                                      | 12 ++++++------
 src/ftxui/component/checkbox.cpp              |  2 +-
 src/ftxui/component/component.cpp             |  7 +++----
 src/ftxui/component/container.cpp             |  9 ++++-----
 src/ftxui/component/container_test.cpp        | 12 +++++++++---
 src/ftxui/component/menu.cpp                  |  9 ++++-----
 src/ftxui/component/screen_interactive.cpp    |  4 ++--
 src/ftxui/component/terminal_input_parser.cpp |  7 +++++--
 src/ftxui/component/terminal_input_parser.hpp |  5 +++--
 .../component/terminal_input_parser_test.cpp  |  9 ++++++---
 src/ftxui/dom/border.cpp                      | 11 +++++------
 src/ftxui/dom/flex.cpp                        |  7 +++----
 src/ftxui/dom/frame.cpp                       |  9 ++++-----
 src/ftxui/dom/node_decorator.cpp              |  5 ++---
 src/ftxui/dom/reflect.cpp                     |  7 +++----
 src/ftxui/dom/size.cpp                        | 11 +++++------
 src/ftxui/dom/spinner.cpp                     | 11 +++++------
 src/ftxui/dom/util.cpp                        |  1 +
 src/ftxui/screen/screen.cpp                   |  3 +--
 tools/iwyu.sh                                 |  6 ++++--
 25 files changed, 106 insertions(+), 98 deletions(-)

diff --git a/examples/dom/hflow.cpp b/examples/dom/hflow.cpp
index 6d2cb9db..02b9a71a 100644
--- a/examples/dom/hflow.cpp
+++ b/examples/dom/hflow.cpp
@@ -1,11 +1,12 @@
-#include <stddef.h>
-#include <ftxui/dom/elements.hpp>
-#include <ftxui/screen/screen.hpp>
-#include <ftxui/screen/string.hpp>
-#include <string>
+#include <stddef.h>                // for size_t
+#include <ftxui/dom/elements.hpp>  // for operator|, size, Element, text, hcenter, Decorator, WIDTH, hflow, window, EQUAL, GREATER_THAN, HEIGHT, bold, border, dim, LESS_THAN
+#include <ftxui/screen/screen.hpp>  // for Dimension, Screen
+#include <ftxui/screen/string.hpp>  // for to_wstring
+#include <memory>                   // for shared_ptr
+#include <string>  // for allocator, operator+, char_traits, wstring
 
-#include "ftxui/dom/node.hpp"
-#include "ftxui/screen/box.hpp"
+#include "ftxui/dom/node.hpp"    // for Render
+#include "ftxui/screen/box.hpp"  // for ftxui
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
diff --git a/examples/dom/html_like.cpp b/examples/dom/html_like.cpp
index 4f602878..c1252670 100644
--- a/examples/dom/html_like.cpp
+++ b/examples/dom/html_like.cpp
@@ -1,13 +1,14 @@
-#include <chrono>
-#include <ftxui/dom/elements.hpp>
-#include <ftxui/screen/screen.hpp>
-#include <iostream>
-#include <string>
-#include <thread>
+#include <chrono>                  // for operator""s, chrono_literals
+#include <ftxui/dom/elements.hpp>  // for paragraph, text, operator|, Element, border, color, hflow, spinner, vbox, bold, dim, underlined
+#include <ftxui/screen/screen.hpp>  // for Screen, Dimension
+#include <iostream>                 // for cout, ostream
+#include <memory>                   // for shared_ptr
+#include <string>                   // for allocator, operator<<, string
+#include <thread>                   // for sleep_for
 
-#include "ftxui/dom/node.hpp"
-#include "ftxui/screen/box.hpp"
-#include "ftxui/screen/color.hpp"
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/box.hpp"    // for ftxui
+#include "ftxui/screen/color.hpp"  // for Color, Color::Red
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
diff --git a/include/ftxui/component/component.hpp b/include/ftxui/component/component.hpp
index cebbc540..11abf6de 100644
--- a/include/ftxui/component/component.hpp
+++ b/include/ftxui/component/component.hpp
@@ -30,7 +30,6 @@ Component Radiobox(const std::vector<std::wstring>* entries, int* selected_);
 Component Toggle(const std::vector<std::wstring>* entries, int* selected);
 Component Renderer(Component child, std::function<Element()>);
 Component Renderer(std::function<Element()>);
-
 template <class T>  // T = {int, float}
 Component Slider(StringRef label, T* value, T min, T max, T increment);
 
@@ -40,7 +39,7 @@ Component Horizontal(Components children);
 Component Tab(int* selector, Components children);
 }  // namespace Container
 
-};  // namespace ftxui
+}  // namespace ftxui
 
 #endif /* end of include guard: FTXUI_COMPONENT_HPP */
 
diff --git a/include/ftxui/component/receiver.hpp b/include/ftxui/component/receiver.hpp
index 8b236c35..2f35f446 100644
--- a/include/ftxui/component/receiver.hpp
+++ b/include/ftxui/component/receiver.hpp
@@ -1,13 +1,15 @@
 #ifndef FTXUI_COMPONENT_RECEIVER_HPP_
 #define FTXUI_COMPONENT_RECEIVER_HPP_
 
-#include <atomic>              // for atomic
+#include <algorithm>           // for copy, max
+#include <atomic>              // for atomic, __atomic_base
 #include <condition_variable>  // for condition_variable
 #include <functional>
 #include <iostream>
-#include <memory>  // for unique_ptr, make_unique
-#include <mutex>   // for mutex, unique_lock
-#include <queue>   // for queue
+#include <memory>   // for unique_ptr, make_unique
+#include <mutex>    // for mutex, unique_lock
+#include <queue>    // for queue
+#include <utility>  // for move
 
 namespace ftxui {
 
diff --git a/include/ftxui/component/screen_interactive.hpp b/include/ftxui/component/screen_interactive.hpp
index 0b477d1f..827602f1 100644
--- a/include/ftxui/component/screen_interactive.hpp
+++ b/include/ftxui/component/screen_interactive.hpp
@@ -1,11 +1,11 @@
 #ifndef FTXUI_COMPONENT_SCREEN_INTERACTIVE_HPP
 #define FTXUI_COMPONENT_SCREEN_INTERACTIVE_HPP
 
-#include <atomic>  // for atomic
-#include <ftxui/component/receiver.hpp>
-#include <functional>  // for function
-#include <memory>      // for unique_ptr, shared_ptr
-#include <string>      // for string
+#include <atomic>                        // for atomic
+#include <ftxui/component/receiver.hpp>  // for Receiver, Sender
+#include <functional>                    // for function
+#include <memory>                        // for shared_ptr
+#include <string>                        // for string
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/event.hpp"
diff --git a/iwyu.imp b/iwyu.imp
index 388878ca..e1a5d3b9 100644
--- a/iwyu.imp
+++ b/iwyu.imp
@@ -1,11 +1,11 @@
 [
-  { symbol: [ "VMIN", private, "<termios.h>", public ] },
-  { symbol: [ "VTIME", private, "<termios.h>", public ] },
   { symbol: [ "ECHO", private, "<termios.h>", public ] },
   { symbol: [ "ICANON", private, "<termios.h>", public ] },
-  { symbol: [ "termios", private, "<termios.h>", public ] },
   { symbol: [ "TCSANOW", private, "<termios.h>", public ] },
-  { symbol: [ "__shared_ptr_access", private, "", public ] },
-  { symbol: [ "ftxui", private , "", public ] },
-  { include: ["ext/alloc_traits.h", "private", "<memory>", "public"] }
+  { symbol: [ "VMIN", private, "<termios.h>", public ] },
+  { symbol: [ "VTIME", private, "<termios.h>", public ] },
+  { symbol: [ "__shared_ptr_access", private, "<memory>", public ] },
+  { symbol: [ "termios", private, "<termios.h>", public ] },
+  { symbol: ["__alloc_traits<>:value_type", private, "<vector>", public ] },
+  { include: ["<ext/alloc_traits.h>", private, "<vector>", public] },
 ]
diff --git a/src/ftxui/component/checkbox.cpp b/src/ftxui/component/checkbox.cpp
index d440bdab..f3cd1c59 100644
--- a/src/ftxui/component/checkbox.cpp
+++ b/src/ftxui/component/checkbox.cpp
@@ -35,7 +35,7 @@ Component Checkbox(ConstStringRef label, bool* checked) {
 }
 
 // static
-CheckboxBase* From(Component component) {
+CheckboxBase* CheckboxBase::From(Component component) {
   return static_cast<CheckboxBase*>(component.get());
 }
 
diff --git a/src/ftxui/component/component.cpp b/src/ftxui/component/component.cpp
index 7f13276d..1459ef70 100644
--- a/src/ftxui/component/component.cpp
+++ b/src/ftxui/component/component.cpp
@@ -1,7 +1,6 @@
-#include <algorithm>           // for find_if
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <iterator>            // for begin, end
-#include <utility>             // for move
+#include <algorithm>  // for find_if, max
+#include <iterator>   // for begin, end
+#include <utility>    // for move
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse, CapturedMouseInterface
 #include "ftxui/component/component.hpp"
diff --git a/src/ftxui/component/container.cpp b/src/ftxui/component/container.cpp
index a9d372b2..361096bb 100644
--- a/src/ftxui/component/container.cpp
+++ b/src/ftxui/component/container.cpp
@@ -1,9 +1,8 @@
-#include <stddef.h>            // for size_t
-#include <algorithm>           // for max, min
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>  // for __shared_ptr_access, shared_ptr, make_shared, __shared_ptr_access<>::element_type, allocator_traits<>::value_type
+#include <stddef.h>   // for size_t
+#include <algorithm>  // for max, min
+#include <memory>  // for __shared_ptr_access, shared_ptr, make_shared, allocator, __shared_ptr_access<>::element_type, allocator_traits<>::value_type
 #include <utility>  // for move
-#include <vector>   // for vector, allocator
+#include <vector>   // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/component/container.hpp"
 
diff --git a/src/ftxui/component/container_test.cpp b/src/ftxui/component/container_test.cpp
index 13cc19f5..9c51c7bf 100644
--- a/src/ftxui/component/container_test.cpp
+++ b/src/ftxui/component/container_test.cpp
@@ -10,7 +10,9 @@ using namespace ftxui;
 
 TEST(ContainerTest, HorizontalEvent) {
   auto container = ContainerBase::Horizontal();
-  Component c0, c1, c2;
+  auto c0 = Container::Horizontal({});
+  auto c1 = Container::Horizontal({});
+  auto c2 = Container::Horizontal({});
   container->Add(c0);
   container->Add(c1);
   container->Add(c2);
@@ -81,7 +83,9 @@ TEST(ContainerTest, HorizontalEvent) {
 
 TEST(ContainerTest, VerticalEvent) {
   auto container = ContainerBase::Vertical();
-  Component c0, c1, c2;
+  auto c0 = Container::Horizontal({});
+  auto c1 = Container::Horizontal({});
+  auto c2 = Container::Horizontal({});
   container->Add(c0);
   container->Add(c1);
   container->Add(c2);
@@ -152,7 +156,9 @@ TEST(ContainerTest, VerticalEvent) {
 
 TEST(ContainerTest, SetActiveChild) {
   auto container = ContainerBase::Horizontal();
-  Component c0, c1, c2;
+  auto c0 = Container::Horizontal({});
+  auto c1 = Container::Horizontal({});
+  auto c2 = Container::Horizontal({});
   container->Add(c0);
   container->Add(c1);
   container->Add(c2);
diff --git a/src/ftxui/component/menu.cpp b/src/ftxui/component/menu.cpp
index 59c3583c..86a12041 100644
--- a/src/ftxui/component/menu.cpp
+++ b/src/ftxui/component/menu.cpp
@@ -1,8 +1,7 @@
-#include <stddef.h>            // for size_t
-#include <algorithm>           // for max, min
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for shared_ptr, allocator_traits<>::value_type
-#include <utility>             // for move
+#include <stddef.h>   // for size_t
+#include <algorithm>  // for max, min
+#include <memory>     // for shared_ptr, allocator_traits<>::value_type
+#include <utility>    // for move
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/event.hpp"  // for Event, Event::ArrowDown, Event::ArrowUp, Event::Return, Event::Tab, Event::TabReverse
diff --git a/src/ftxui/component/screen_interactive.cpp b/src/ftxui/component/screen_interactive.cpp
index 21fa886d..f1318ee7 100644
--- a/src/ftxui/component/screen_interactive.cpp
+++ b/src/ftxui/component/screen_interactive.cpp
@@ -31,8 +31,8 @@
 #endif
 #else
 #include <sys/select.h>  // for select, FD_ISSET, FD_SET, FD_ZERO, fd_set
-#include <termios.h>  // for tcsetattr, termios, tcgetattr, TCSANOW, cc_t, ECHO, ICANON, VMIN, VTIME
-#include <unistd.h>  // for STDIN_FILENO, read
+#include <termios.h>     // for tcsetattr, tcgetattr, cc_t
+#include <unistd.h>      // for STDIN_FILENO, read
 #endif
 
 // Quick exit is missing in standard CLang headers
diff --git a/src/ftxui/component/terminal_input_parser.cpp b/src/ftxui/component/terminal_input_parser.cpp
index acab8e4b..63c57ae3 100644
--- a/src/ftxui/component/terminal_input_parser.cpp
+++ b/src/ftxui/component/terminal_input_parser.cpp
@@ -1,7 +1,10 @@
 #include "ftxui/component/terminal_input_parser.hpp"
 
-#include <utility>
-#include "ftxui/component/event.hpp"
+#include <algorithm>  // for max
+#include <memory>     // for unique_ptr
+#include <utility>    // for move
+
+#include "ftxui/component/event.hpp"  // for Event
 
 namespace ftxui {
 
diff --git a/src/ftxui/component/terminal_input_parser.hpp b/src/ftxui/component/terminal_input_parser.hpp
index 69645a6a..244e843c 100644
--- a/src/ftxui/component/terminal_input_parser.hpp
+++ b/src/ftxui/component/terminal_input_parser.hpp
@@ -5,11 +5,12 @@
 #include <string>  // for string
 #include <vector>  // for vector
 
-#include "ftxui/component/event.hpp"     // IWYU pragma: keep
+#include "ftxui/component/event.hpp"     // for Event (ptr only)
 #include "ftxui/component/mouse.hpp"     // for Mouse
-#include "ftxui/component/receiver.hpp"  // for SenderImpl
+#include "ftxui/component/receiver.hpp"  // for Sender
 
 namespace ftxui {
+struct Event;
 
 // Parse a sequence of |char| accross |time|. Produces |Event|.
 class TerminalInputParser {
diff --git a/src/ftxui/component/terminal_input_parser_test.cpp b/src/ftxui/component/terminal_input_parser_test.cpp
index b37b2163..f2ca2d89 100644
--- a/src/ftxui/component/terminal_input_parser_test.cpp
+++ b/src/ftxui/component/terminal_input_parser_test.cpp
@@ -1,9 +1,12 @@
-#include <gtest/gtest-message.h>    // for Message
-#include <gtest/gtest-test-part.h>  // for TestPartResult
+#include <gtest/gtest-message.h>  // for Message
+#include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
+#include <algorithm>                // for max
+#include <memory>                   // for unique_ptr, allocator
 
+#include "ftxui/component/event.hpp"     // for Event, Event::Escape
 #include "ftxui/component/receiver.hpp"  // for MakeReceiver, ReceiverImpl
 #include "ftxui/component/terminal_input_parser.hpp"
-#include "gtest/gtest_pred_impl.h"  // for AssertionResult, Test, Suite...
+#include "gtest/gtest_pred_impl.h"  // for AssertionResult, Test, EXPECT_EQ, EXPECT_TRUE, EXPECT_FALSE, TEST
 
 using namespace ftxui;
 
diff --git a/src/ftxui/dom/border.cpp b/src/ftxui/dom/border.cpp
index f543498c..feacaaf0 100644
--- a/src/ftxui/dom/border.cpp
+++ b/src/ftxui/dom/border.cpp
@@ -1,9 +1,8 @@
-#include <algorithm>           // for max
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <iterator>            // for begin, end
-#include <memory>              // for make_shared, __shared_ptr_access
-#include <utility>             // for move
-#include <vector>              // for vector
+#include <algorithm>  // for max
+#include <iterator>   // for begin, end
+#include <memory>     // for make_shared, __shared_ptr_access
+#include <utility>    // for move
+#include <vector>     // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/dom/elements.hpp"  // for unpack, Element, Decorator, Elements, border, borderWith, window
 #include "ftxui/dom/node.hpp"         // for Node
diff --git a/src/ftxui/dom/flex.cpp b/src/ftxui/dom/flex.cpp
index b8aa282b..3ad4a514 100644
--- a/src/ftxui/dom/flex.cpp
+++ b/src/ftxui/dom/flex.cpp
@@ -1,7 +1,6 @@
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for make_shared, __shared_ptr_access
-#include <utility>             // for move
-#include <vector>              // for vector
+#include <memory>   // for make_shared, __shared_ptr_access
+#include <utility>  // for move
+#include <vector>   // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/dom/elements.hpp"  // for Element, unpack, filler, flex, flex_grow, flex_shrink, notflex, xflex, xflex_grow, xflex_shrink, yflex, yflex_grow, yflex_shrink
 #include "ftxui/dom/node.hpp"      // for Node
diff --git a/src/ftxui/dom/frame.cpp b/src/ftxui/dom/frame.cpp
index 9d4b2e57..6ee8c447 100644
--- a/src/ftxui/dom/frame.cpp
+++ b/src/ftxui/dom/frame.cpp
@@ -1,8 +1,7 @@
-#include <algorithm>           // for max, min
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>   // for make_shared, shared_ptr, __shared_ptr_access
-#include <utility>  // for move
-#include <vector>   // for vector
+#include <algorithm>  // for max, min
+#include <memory>     // for make_shared, shared_ptr, __shared_ptr_access
+#include <utility>    // for move
+#include <vector>     // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/dom/elements.hpp"  // for Element, unpack, focus, frame, select, xframe, yframe
 #include "ftxui/dom/node.hpp"  // for Node
diff --git a/src/ftxui/dom/node_decorator.cpp b/src/ftxui/dom/node_decorator.cpp
index d12e2df1..ec01d1c6 100644
--- a/src/ftxui/dom/node_decorator.cpp
+++ b/src/ftxui/dom/node_decorator.cpp
@@ -1,6 +1,5 @@
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for __shared_ptr_access
-#include <vector>              // for vector
+#include <memory>  // for __shared_ptr_access
+#include <vector>  // for __alloc_traits<>::value_type, vector
 
 #include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/requirement.hpp"  // for Requirement
diff --git a/src/ftxui/dom/reflect.cpp b/src/ftxui/dom/reflect.cpp
index fa6167dc..3c7c9ee6 100644
--- a/src/ftxui/dom/reflect.cpp
+++ b/src/ftxui/dom/reflect.cpp
@@ -1,7 +1,6 @@
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for make_shared, __shared_ptr_access
-#include <utility>             // for move
-#include <vector>              // for vector
+#include <memory>   // for make_shared, __shared_ptr_access
+#include <utility>  // for move
+#include <vector>   // for __alloc_traits<>::value_type, vector
 
 #include "ftxui/dom/elements.hpp"     // for Element, unpack, Decorator, reflect
 #include "ftxui/dom/node.hpp"         // for Node
diff --git a/src/ftxui/dom/size.cpp b/src/ftxui/dom/size.cpp
index 2004b13f..ca564ea6 100644
--- a/src/ftxui/dom/size.cpp
+++ b/src/ftxui/dom/size.cpp
@@ -1,9 +1,8 @@
-#include <stddef.h>            // for size_t
-#include <algorithm>           // for min, max
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for make_shared, __shared_ptr_access
-#include <utility>             // for move
-#include <vector>              // for vector
+#include <stddef.h>   // for size_t
+#include <algorithm>  // for min, max
+#include <memory>     // for make_shared, __shared_ptr_access
+#include <utility>    // for move
+#include <vector>     // for __alloc_traits<>::value_type, vector
 
 #include "ftxui/dom/elements.hpp"  // for Constraint, Direction, EQUAL, GREATER_THAN, LESS_THAN, WIDTH, unpack, Decorator, Element, size
 #include "ftxui/dom/node.hpp"      // for Node
diff --git a/src/ftxui/dom/spinner.cpp b/src/ftxui/dom/spinner.cpp
index 2510edd9..8d7a602e 100644
--- a/src/ftxui/dom/spinner.cpp
+++ b/src/ftxui/dom/spinner.cpp
@@ -1,9 +1,8 @@
-#include <stddef.h>            // for size_t
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
-#include <memory>              // for allocator, allocator_traits<>::value_type
-#include <string>              // for basic_string, wstring
-#include <utility>             // for move
-#include <vector>              // for vector
+#include <stddef.h>  // for size_t
+#include <memory>    // for allocator, allocator_traits<>::value_type
+#include <string>    // for basic_string, wstring
+#include <utility>   // for move
+#include <vector>    // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/dom/elements.hpp"  // for Element, gauge, text, vbox, spinner
 
diff --git a/src/ftxui/dom/util.cpp b/src/ftxui/dom/util.cpp
index 17706119..9a491617 100644
--- a/src/ftxui/dom/util.cpp
+++ b/src/ftxui/dom/util.cpp
@@ -1,5 +1,6 @@
 #include <functional>  // for function
 #include <utility>     // for move
+#include <vector>      // for vector
 
 #include "ftxui/dom/elements.hpp"  // for Decorator, Element, Elements, operator|, nothing
 
diff --git a/src/ftxui/screen/screen.cpp b/src/ftxui/screen/screen.cpp
index 4a1a0223..5a3dbd19 100644
--- a/src/ftxui/screen/screen.cpp
+++ b/src/ftxui/screen/screen.cpp
@@ -1,5 +1,4 @@
-#include <algorithm>           // for min
-#include <ext/alloc_traits.h>  // for __alloc_traits<>::value_type
+#include <algorithm>  // for min
 #include <iostream>  // for operator<<, basic_ostream, wstringstream, stringstream, flush, cout, ostream
 #include <sstream>   // IWYU pragma: keep
 
diff --git a/tools/iwyu.sh b/tools/iwyu.sh
index 1e1f62b1..88da55e3 100755
--- a/tools/iwyu.sh
+++ b/tools/iwyu.sh
@@ -6,6 +6,8 @@ mkdir -p iwyu
 cd iwyu
 rm * -rf
 echo $CMAKE_CXX_INCLUDE_WHAT_YOU_USE
-cmake .. -DFTXUI_BUILD_TESTS=ON -DCMAKE_CXX_INCLUDE_WHAT_YOU_USE="iwyu;-Xiwyu;--cxx17ns;-Xiwyu;--mapping_file=${mapping_dir}/iwyu.imp;-Xiwyu;--verbose=3"
+cmake .. -DFTXUI_BUILD_TESTS=ON -DCMAKE_CXX_INCLUDE_WHAT_YOU_USE="include-what-you-use;-Xiwyu;--cxx17ns;-Xiwyu;--mapping_file=${mapping_dir}/iwyu.imp;-Xiwyu;--verbose=3"
 make -j 2>out
-fix_include --comments < out
+fix_includes.py --comments < out
+
+../tools/format.sh

From 8b67e722b41d68efba86137a341709efa0e1868d Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Sat, 15 May 2021 00:29:39 +0200
Subject: [PATCH 7/8] Increase version.

---
 CMakeLists.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 9af4e371..600d7ed1 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -15,7 +15,7 @@ endif()
 
 project(ftxui
   LANGUAGES CXX
-  VERSION 0.4.${git_version}
+  VERSION 0.5.${git_version}
 )
 
 option(FTXUI_BUILD_EXAMPLES "Set to ON to build examples" ON)

From 7e4720b471f9963d8e1f984610fdea85240b9723 Mon Sep 17 00:00:00 2001
From: ArthurSonzogni <sonzogniarthur@gmail.com>
Date: Sat, 15 May 2021 00:36:21 +0200
Subject: [PATCH 8/8] Fix typo in Doxyfile.in

---
 doc/Doxyfile.in | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/Doxyfile.in b/doc/Doxyfile.in
index 4599a800..a01c5d86 100644
--- a/doc/Doxyfile.in
+++ b/doc/Doxyfile.in
@@ -44,7 +44,7 @@ PROJECT_NUMBER         = @CMAKE_PROJECT_VERSION@
 # for a project that appears at the top of each page and should give viewer a
 # quick idea about the purpose of the project. Keep the description short.
 
-PROJECT_BRIEF          = "C++ functionnal terminal UI."
+PROJECT_BRIEF          = "C++ functional terminal UI."
 
 # With the PROJECT_LOGO tag one can specify a logo or an icon that is included
 # in the documentation. The maximum height of the logo should not exceed 55