Getting Started
Requirements
- C++ Standard: C++17 or later.
- OS: Windows 10/11 (for Virtual Terminal support) or Linux/macOS.
- Terminal: A terminal emulator that supports ANSI escape codes (most modern terminals).
Installation
cpp-tui is a single-header library. Copy cpptui.hpp (located in the project root) into your project and include it:
#include "cpptui.hpp"
using namespace cpptui;
No external dependencies are required.
Integration
CMake
If using CMake, you can add it as an interface library:
add_library(cpptui INTERFACE)
target_include_directories(cpptui INTERFACE ${CMAKE_CURRENT_SOURCE_DIR}/path/to/cpptui)
add_executable(my_app main.cpp)
target_link_libraries(my_app PRIVATE cpptui)
Direct File
Since it’s a single header, you can just download cpptui.hpp and put it next to your source file.
g++ -std=c++17 -I. main.cpp -o my_app
Minimal Example
#include "cpptui.hpp"
using namespace cpptui;
int main() {
App app;
Theme::set_theme(Theme::Dark());
auto root = std::make_shared<Vertical>();
auto label = std::make_shared<Label>("Hello, cpp-tui!");
auto button = std::make_shared<Button>("Quit", [&app]() {
app.quit();
});
root->add(label);
root->add(button);
app.register_exit_key('q');
app.run(root);
return 0;
}
Compiling
Compile with any C++17 compiler:
# g++
g++ -std=c++17 -o myapp main.cpp
# clang++
clang++ -std=c++17 -o myapp main.cpp
Adding Widgets
Widgets are created as std::shared_ptr and added to layout containers:
auto layout = std::make_shared<Vertical>();
// Text
layout->add(std::make_shared<Label>("Status: OK"));
// Input
auto input = std::make_shared<Input>();
input->placeholder = "Type here...";
layout->add(input);
// Button
layout->add(std::make_shared<Button>("Submit", [&input]() {
std::string value = input->get_value();
// process value...
}));
Layouts can be nested — put a Horizontal inside a Vertical to create columns within rows.
Theming
Switch themes with a single call:
Theme::set_theme(Theme::Dark()); // Catppuccin Mocha
Theme::set_theme(Theme::Light()); // Catppuccin Latte
Theme::set_theme(Theme::Nord()); // Arctic palette
Theme::set_theme(Theme::TokyoNight()); // Tokyo Night
Next Steps
- Core Concepts — Understand the App lifecycle, Widget model, and event system
- API Reference — Browse every widget and its properties
- Troubleshooting — Solutions for common issues