Introduction

SableUI is a high-performance C++ UI framework that brings React's component model and Tailwind's styling approach to native applications - without the overhead of web technologies.

class Counter : public SableUI::BaseComponent {
    void Layout() override {
        Div(bg(245, 245, 245) p(30) centerXY rounded(10)) {
            Text(SableString::Format("Count: %d", count),
                fontSize(28) mb(20) textColour(20, 20, 20));
            
            Div(onClick([=]() { setCount(count + 1); })) {
                Text("Increment");
            }
        }
    }
private:
    useState(count, setCount, int, 0);
};



Card image

What is SableUI?

Purpose and design philosophies

Card image

Getting Started

Build a starter application in under 5 minutes

Card image

Core concepts

Understand concepts such as components, states and more

Card image

API reference

Learn how to build a anything using SableUI's layout system

Card image

Examples

See real applications

Card image

Advanced topics

To build complex applications and access deeper APIs