> For the complete documentation index, see [llms.txt](https://vgui-framework.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vgui-framework.gitbook.io/docs/examples.md).

# Examples

[Documentation](/docs/readme.md)

These snippets assume an open frame and window unless begin/end calls are shown. Keep application state between frames.

## Buttons on one row

```cpp
ui.set_next_item_width(100);
if (ui.button("Apply")) save_settings(); // Your application function.
ui.same_line(8);
ui.set_next_item_width(100);
if (ui.button("Reset")) volume = 0.65f;
ui.separator();
ui.text("Next row");
```

## Repeated widgets

```cpp
for (int index = 0; index < 3; ++index) {
    ui.push_id(index);
    if (ui.button("test")) selected = index;
    ui.pop_id();
}
```

If collection order can change, use a stable object ID instead of its index. For repeated captions outside a loop, a hidden suffix works too:

```cpp
ui.checkbox("test##music", music);
ui.checkbox("test##voice", voice);
```

## Tabs

```cpp
// page, volume and player are application state kept between frames.
ui.tabs("settings", page, {"General", "Audio"});
if (page == 0) ui.text_entry("Player", player);
if (page == 1) ui.slider("Volume", volume, 0.0f, 1.0f);
```

## Panels

```cpp
ui.begin_window("test", window_bounds);
ui.begin_panel("Left", {12, 40, 220, 240});
ui.text("test");
ui.end_panel();
ui.begin_panel("Right", {244, 40, 220, 240});
ui.checkbox("test", enabled);
ui.end_panel();
ui.end_window();
```

Panels are positioned relative to the parent, not the layout cursor. Give the parent enough room for both panels. Use `begin_scroll_panel()` when content needs automatic scrolling:

```cpp
ui.begin_scroll_panel("Options", {12, 40, 260, 220});
for (int i = 0; i < 40; ++i) {
    ui.push_id(i);
    ui.button("test");
    ui.tooltip("Help for this row");
    ui.pop_id();
}
ui.end_scroll_panel();
```

The panel measures the submitted content and adds a scrollbar. Keep the content submitted each frame; clipping does not provide list virtualization.

## UTF-8 and images

```cpp
// C++17: UTF-8 literal stored in application state.
std::string name = u8"\u041f\u0440\u0438\u0432\u0435\u0442";
ui.text_entry("Name", name, 256); // Byte limit for new input.
ui.tooltip("Drag to select; Ctrl+A/C/V/X are available.");
ui.image(icon_srv, 32, 32); // Texture2D SRV from ui.device().
```

Create the image outside the UI loop and recreate it after replacing the device. See [external rendering](/docs/external-rendering.md) for ownership rules. `demo/features.cpp` has a complete texture creation and reset example.

## Lists and multiple selection

```cpp
// Keep these between frames.
std::vector<std::string> maps{"de_dust2", "de_nuke", "cs_office"};
int map = 0;
std::vector<bool> channels{true, false, true};

// Submit each frame.
ui.combo_box("Map", map, maps);
ui.list_box("Maps", map, maps, 3);
ui.multi_box("Channels", channels, {"Music", "Voice", "Effects"}, 3);
```

## Hover state

```cpp
ui.button("test");
const auto item = ui.last_item();
if (item.hovered) ui.text("hovered");
```

Read or save ItemState before submitting another widget: `text()` updates it too.

## Theme

Set layout metrics before starting a frame:

```cpp
ui.theme.scroll_track = {58, 65, 49};
ui.theme.check = {235, 240, 225};
ui.style.padding = 12;
ui.style.item_spacing = 7;
```

## Progress blocks

```cpp
ui.progress_bar(progress);     // 16 blocks.
ui.progress_bar(progress, 10); // 10 blocks.
```

The caller supplies progress from 0 to 1. Blocks appear whole; with 10 blocks, 0.3 fills three of them.

## Borderless window

```cpp
// After creating the context, outside a frame.
ui.set_borderless(true);
vgui::Rect bounds{};

// Inside the application loop.
if (ui.begin_frame()) {
    ui.begin_window("test", bounds, vgui::WindowMode::Native);
    ui.text("test");
    if (ui.button("Close")) running = false;
    ui.end_window();
    ui.end_frame();
}
```

Here `running` controls your application's loop. Use one native root per HWND. For separate desktop windows, create an HWND and context for each.

## Complete settings menu

[settings.hpp](https://github.com/insomfaze/vgui-framework/blob/main/examples/settings.hpp) holds application state; [settings.cpp](https://github.com/insomfaze/vgui-framework/blob/main/examples/settings.cpp) implements `show_settings(ui, settings)`. Call it inside a successful frame, without another window open. CTest checks submission of each settings tab.

[demo/main.cpp](https://github.com/insomfaze/vgui-framework/blob/main/demo/main.cpp) is a standalone old-Steam-style demo with a game list and simulated pre-loading. It also serves as the DLL client example.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://vgui-framework.gitbook.io/docs/examples.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.