> ## 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.

# Quickstart

> Load Gabibou UI and build a small menu with a toggle and slider.

## 1. Load the library

Follow [Installation](https://gabibou-ui.mintlify.site/getting-started/installation.md) for your environment. In a client editor that supports `loadstring` and `game:HttpGet`, this one line loads the published library:

```lua theme={null}
local UI = loadstring(game:HttpGet('https://raw.githubusercontent.com/Gabibou455/GabibouUI/main/gabibou_ui.luau'))()
```

In Roblox Studio, use the ModuleScript loader from Installation instead. Keep the `UI` variable name so the examples below work as written.

## 2. Add a window, tab, and controls

Paste these lines directly after the loader:

```lua theme={null}
local window = UI:CreateWindow('My project')
local tab = window:Tab('Settings', 'settings')

tab:Toggle('Show effects', function(enabled)
    print('Effects enabled:', enabled)
end)

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

Run the script. Click **Show effects** or drag **Volume**; each control calls its function with the new value. `window` is the panel, `tab` is a page in that panel, and each control is added to the tab. The callback runs when a player changes the control.

![Running rc.21 Gabibou UI demo with a button, one toggle off, one toggle on, and a slider](https://mintcdn.com/gabibou-ui/I5Uhr5uQ-CiiLlxQ/images/controls-examples.png?fit=max\&auto=format\&n=I5Uhr5uQ-CiiLlxQ\&q=85\&s=f3b4f6338b94091208dd7fa5c51030de)

*A separate live rc.21 demo; its control labels and values differ from this Quickstart example.*

## Choose a look (optional)

Design presets are part of the 1.5.0-rc.21 release candidate. If your installed copy includes the `Design` option, replace Step 2's `CreateWindow` line with this one to use Atelier:

```lua theme={null}
local window = UI:CreateWindow('My project', {Design = 'Atelier'})
```

Check `UI.Version` to identify your installed copy. For setup and all design options, see [Design your interface](https://gabibou-ui.mintlify.site/customization/design-your-interface.md).

| Preset | Palette and spacing | Corners | Tabs and navigation |
| - | - | - | - |
| Studio | Graphite, Comfortable | Balanced | Left, Soft |
| Minimal | Graphite, Compact | Sharp | Left, Classic |
| Command | Near-black, Spacious | Balanced | Top, Pill |
| Atelier | Monochrome, Comfortable | Balanced | Left, Rail |

## Connect a control to your project

In Step 2, replace the existing **Show effects** toggle with this version. Its callback connects the toggle to your project state, and `effectsToggle` keeps a handle for later updates:

```lua theme={null}
local effectsEnabled = false
local effectsToggle = tab:Toggle('Show effects', {Value = effectsEnabled}, function(enabled)
    effectsEnabled = enabled -- connect your effect system here
end)

-- Later, update the control and run its callback:
effectsToggle:Set(true, true)
```

Change `'Show effects'` to your control's label and set `effectsEnabled` to the starting value you want. `Set(value, true)` updates the control and calls its callback when the value changes; `Set(value)` or `Set(value, false)` updates it without calling the callback. A returned control handle also has methods such as `SetTitle` and `SetEnabled`.

## 3. Try other controls

Use the same `tab` variable to add controls. These short examples show the common controls:

```lua theme={null}
tab:Button('Say hello', function()
    print('Hello!')
end)

tab:Dropdown('Quality', {Options = {'Low', 'Medium', 'High'}, Value = 'Medium'}, function(value)
    print('Quality:', value)
end)

tab:Input('Player name', {Placeholder = 'Type a name'}, function(value)
    print('Name:', value)
end)

tab:Keybind('Toggle menu', {Value = 'F6'}, function(key)
    print('Pressed:', key)
end)

tab:ColorPicker('Highlight', {Value = '#78BEFF'}, function(color)
    print('Highlight:', color)
end)

tab:Paragraph({Title = 'Tip', Description = 'You can add a short note to a tab.'})
```

A **button** runs an action. A **dropdown** chooses from `Options`. An **input** returns text. A **keybind** listens for a key. A **color picker** returns the chosen color. A **paragraph** displays information and has no callback. For all options and value types, see [Controls](https://gabibou-ui.mintlify.site/customization/controls.md).

## Group controls and tabs

Add a section heading within a tab with `tab:Section('Audio')`, then call controls on the returned section. Add a category heading to the navigation rail with `window:Category('Settings')`, then create tabs beneath it with `category:Tab('Audio', 'volume-2')`. See [Design your interface](https://gabibou-ui.mintlify.site/customization/design-your-interface.md) for a complete category example.

Next, see [Appearance and layout](https://gabibou-ui.mintlify.site/customization/appearance-and-layout.md) to change how the window looks.


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