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 BaseComponent
{
public:
	void Layout() override
	{
		const Theme& t = GetTheme();

		Div(bg(t.surface0), p(30), centerXY, rounded(10))
		{
			Text(SableString::Format("Count: %d", count.get()), fontSize(28), mb(20), textWrap(false));

			Div(left_right)
			{
				Button("Increment", [this]() { count.set(count.get() + 1); }, mr(4));
				Button("Decrement", [this]() { count.set(count.get() - 1); });
			}
		}
	}

private:
	State<int> count{ this, 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