Back to rankings

ArthurSonzogni/FTXUI

C++arthursonzogni.github.io/FTXUI/

:computer: C++ Functional Terminal User Interface. :heart:

uiterminalterminal-basedasciiascii-artcppcursextermuser-interfacesimpletuiarthursonzogni
Star Growth
Stars
10.4k
Forks
605
Weekly Growth
Issues
97
5k10k
Jan 2019Jul 2021Jan 2024Jul 2026
README

Demo image

latest packaged version(s)
Documentation · Report a Bug · Examples . Request Feature · Send a Pull Request
Doc: English | Français | Español | 繁體中文 | 简体中文 | 日本語 |

FTXUI

Functional Terminal (X) User interface

A simple cross-platform C++ library for terminal based user interfaces!

Feature

Documentation

Example

#include <ftxui/ftxui.hpp>
using namespace ftxui;

int main() {
  auto document =
    vbox({
      hbox({
        text("one") | border,
        text("two") | border | flex,
        text("three") | border | flex,
      }),

      gauge(0.25) | color(Color::Red),
      gauge(0.50) | color(Color::White),
      gauge(0.75) | color(Color::Blue),
    });

  auto screen = Screen::Create(Dimension::Full());
  Render(screen, document);
  screen.Print();

  return 0;
}

image

FTXUI is organized into three modules:

  1. screen: Low-level rendering (colors, pixels, terminal)
  2. dom: Layout and composition (hierarchical elements)
  3. component: User interaction (widgets, events, main loop)

For most users, including everything at once is the simplest way to start:

  • Header: #include <ftxui/ftxui.hpp>
  • CMake target: ftxui::ftxui
  • Bazel target: @ftxui//:ftxui

DOM

This module defines a hierarchical set of Element. An Element manages layout and can be responsive to the terminal dimensions.

They are declared in <ftxui/dom/elements.hpp>

Layout

Element can be arranged together:

  • horizontally with hbox
  • vertically with vbox
  • inside a grid with gridbox
  • wrap along one direction using the flexbox.

Element can become flexible using the flex decorator.

Example using hbox, vbox and filler.

image

Example using gridbox:

image

Example using flexbox:

image

See also this demo.

Style

An element can be decorated using the functions:

  • bold
  • italic
  • dim
  • inverted
  • underlined
  • underlinedDouble
  • blink
  • strikethrough
  • color
  • bgcolor
  • hyperlink

Example

image

FTXUI supports the pipe operator. It means: decorator1(decorator2(element)) and element | decorator1 | decorator2 can be used.

Colors

FTXUI supports every color palette:

Color gallery: image

Border and separator

Use decorator border and element separator() to subdivide your UI:

Element document = vbox({
    text("top"),
    separator(),
    text("bottom"),
}) | border;

Demo:

image

Text and paragraph

A simple piece of text is represented using text("content").

To support text wrapping following spaces the following functions are provided:

Element paragraph(string text);
Element paragraphAlignLeft(string text);
Element paragraphAlignRight(string text);
Element paragraphAlignCenter(string text);
Element paragraphAlignJustify(string text);

Paragraph example

ezgif com-gif-maker (4)

Table

A class to easily style a table of data.

Example:

image

Canvas

Drawing can be made on a Canvas, using braille, block, or simple characters:

Simple example:

image

Complex examples:

ezgif com-gif-maker (3)

Component

ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).

Prebuilt components are declared in <ftxui/component/component.hpp>

Gallery

Gallery of multiple components. (demo)

image

Radiobox

Example:

image

Checkbox

Example:

image

Input

Example:

image

Toggle

Example:

image

Slider

Example:

image

Menu

Example:

image

ResizableSplit

Example:

ezgif com-gif-maker

Dropdown

Example:

youtube-video-gif (3)

Tab

Vertical:

ezgif com-gif-maker (1)

Horizontal:

ezgif com-gif-maker (2)

Libraries for FTXUI

Project using FTXUI

Feel free to add your projects here:


cpp-best-practices/game_jam

Several games using the FTXUI have been made during the Game Jam:

Build using CMake

It is highly recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.

include(FetchContent)
FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v7.0.1
)
FetchContent_MakeAvailable(ftxui)

target_link_libraries(your_target PRIVATE
    # Use the umbrella target (recommended)
    ftxui::ftxui

    # Or chose a submodule
    # ftxui::component
    # ftxui::dom
    # ftxui::screen
)

Build using Bazel

MODULE.bazel

bazel_dep(
    name = "ftxui",
    version = "7.0.1",
)

BUILD.bazel

cc_binary(
    name = "your_target",
    srcs = ["your_source.cc"],
    deps = [
        # Choose submodules
        "@ftxui//:component",
        "@ftxui//:dom",
        "@ftxui//:screen",
        
        # Or use the single ftxui target (includes all modules)
        # "@ftxui//:ftxui",
    ],
)

Build using Meson

FTXUI can also be built using Meson. See doc/installation_meson.md for detailed instructions.

meson setup builddir
ninja -C builddir

To use FTXUI as a subproject in your Meson project, create a subprojects/ftxui.wrap file or use it as a dependency:

ftxui_dep = dependency('ftxui-component')

Build with something else:

If you don't, FTXUI may be used from the following packages:

Packaging status

If you choose to build and link FTXUI yourself, ftxui-component must be first in the linking order relative to the other FTXUI libraries, i.e.

g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .

To build FTXUI with modules, check documentation

Contributors

Related repositories
react/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
246.6k51.3k
facebook/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
233k47.8k
open-webui/open-webui

User-friendly AI Interface (Supports Ollama, OpenAI API, ...)

PythonPyPIOtherollamaollama-webui
openwebui.com
146.1k21.2k
shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

TypeScriptnpmMIT Licensecomponentsnextjs
ui.shadcn.com
119.4k9.5k
storybookjs/storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

TypeScriptnpmMIT Licensestorybookstyleguide
storybook.js.org
90.6k10.2k
sveltejs/svelte

web development for the rest of us

JavaScriptnpmMIT Licensetemplateui
svelte.dev
87.6k5k
ocornut/imgui

Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies

C++MIT Licenseguigamedev
74.9k11.9k
unslothai/unsloth

Unsloth is a local UI for training and running Gemma 4, Qwen3.6, DeepSeek, Kimi, GLM and other models.

PythonPyPIApache License 2.0fine-tuningllama
unsloth.ai/docs
68.6k6.2k
penpot/penpot

Penpot: The open-source design platform for Product teams that need scalable collaboration.

ClojureMozilla Public License 2.0ux-designux-experience
penpot.app
57k3.8k
wasabeef/awesome-android-ui

A curated list of awesome Android UI/UX libraries

MIT Licenseandroidawesome
56.9k10.3k
Semantic-Org/Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.

JavaScriptnpmMIT Licenseuiui-components
semantic-ui.com
51k4.9k
gradio-app/gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!

PythonPyPIApache License 2.0machine-learningmodels
gradio.app
43.2k3.6k