Quickstart

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

1. Load the library

Follow Installation for your environment. In a client editor that supports loadstring and game:HttpGet, this one line loads the published library:

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:

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.

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:

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.

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:

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:

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.

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 for a complete category example.

Next, see Appearance and layout to change how the window looks.