> ## Documentation Index
> Fetch the complete documentation index at: https://gabibou-ui.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Complete quickstart example

> A copyable ModuleScript example with controls, callbacks, and value updates.

Use this in a client `LocalScript` after adding the library `ModuleScript` to `ReplicatedStorage`.

```lua theme={null}
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local UI = require(ReplicatedStorage:WaitForChild("GabibouUI"))

local window = UI:CreateWindow("My project")
local tab = window:Tab("Settings", "settings")

local effects = tab:Toggle("Effects", function(enabled)
    print("Effects:", enabled)
end)

local volume = tab:Slider("Volume", {Min = 0, Max = 100, Value = 50}, function(value)
    print("Volume:", value)
end)

local quality = tab:Dropdown("Quality", {
    Options = {"Low", "Medium", "High"},
    Value = "Medium",
}, function(choice)
    print("Quality:", choice)
end)

tab:Button("Reset values", function()
    effects:Set(false)
    volume:Set(50)
    quality:Set("Medium")
end)

print("Current effects setting:", effects:Get())
volume:Set(75, true) -- The second argument calls the callback when the value changes.
```

In this example, the toggle uses its default `false` value. The slider starts at `50`, and the dropdown starts at `Medium` because those starting values are supplied explicitly. A value control's callback receives the new value after a user change. `Get()` reads a value; `Set(value)` changes it without firing the callback, and `Set(value, true)` fires it if the value changed.

For the shortest setup, see [Quickstart](https://gabibou-ui.mintlify.site/getting-started/quickstart.md). See [Controls](https://gabibou-ui.mintlify.site/customization/controls.md) for each control's full options and defaults.

## Advanced: declarative setup

`UI:Create` builds a window from a table. Use this form when you prefer to describe tabs and controls as data instead of adding them one by one.

```lua theme={null}
local window = UI:Create({
    Id = "MyInterface",
    Title = "My project",
    Subtitle = "Settings",
    Branding = {Mode = "Avatar", Placement = "BothRight"},
    Loading = {
        Title = "My project",
        Subtitle = "Preparing settings",
        Logo = "Avatar",
        MinimumDuration = 0.6,
    },
    Tabs = {{
        Title = "Settings",
        Icon = "settings",
        Sections = {{
            Title = "Display",
            Controls = {
                {Type = "Toggle", Id = "effects", Title = "Effects", Value = true},
                {Type = "Slider", Id = "volume", Title = "Volume", Min = 0, Max = 100, Value = 50},
            },
        }},
    }},
})

window:Get("effects"):On("Changed", function(value)
    print("Effects:", value)
end)
```

For all options accepted by each form, see the [API reference](https://gabibou-ui.mintlify.site/reference/api.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.