This guide walks you through loading WindUI, creating a window, adding a tab with several UI elements, and firing a notification. By the end you will have a working script hub UI skeleton.
Load WindUI
Add the loadstring loader at the top of your script. This fetches the compiled bundle and returns the WindUI table.local WindUI = loadstring(game:HttpGet("https://raw.githubusercontent.com/Footagesus/WindUI/main/dist/main.lua"))()
Create a window
Call WindUI:CreateWindow() with your hub’s configuration. Title and Icon are displayed in the topbar. Folder is the directory name used to store config files.local Window = WindUI:CreateWindow({
Title = "My Hub",
Icon = "star",
Theme = "Dark",
Folder = "MyHub",
})
You can only call WindUI:CreateWindow() once. Calling it a second time prints a warning and returns nil.
Add a tab
Use Window:Tab() to create a tab inside the window. The Icon field accepts any icon name from the bundled icon libraries (e.g. Lucide, Solar, SF Symbols).local Tab = Window:Tab({
Title = "Main",
Icon = "home",
})
Add UI elements
Add a Toggle, Button, Slider, and Dropdown to the tab. Each element receives a configuration table and an optional Callback that fires when the value changes.-- Toggle
Tab:Toggle({
Title = "Enable Feature",
Value = false,
Callback = function(state)
print("Feature enabled:", state)
end,
})
Tab:Space()
-- Button
Tab:Button({
Title = "Run Action",
Icon = "play",
Callback = function()
print("Button clicked")
end,
})
Tab:Space()
-- Slider
Tab:Slider({
Title = "Walk Speed",
Step = 1,
Value = {
Min = 16,
Max = 100,
Default = 16,
},
Callback = function(value)
game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = value
end,
})
Tab:Space()
-- Dropdown
Tab:Dropdown({
Title = "Select Team",
Values = { "Red", "Blue", "Green" },
Value = 1,
Callback = function(selectedValue)
print("Team selected:", selectedValue)
end,
})
Send a notification
Call WindUI:Notify() from anywhere in your script to show a toast notification. Duration controls how long it stays visible (in seconds).WindUI:Notify({
Title = "Hub Loaded",
Content = "Welcome! My Hub is ready.",
Icon = "solar:bell-bold",
Duration = 5,
})
Complete example
Here is the full script from the steps above in one block, ready to paste into an executor:
local WindUI = loadstring(game:HttpGet("https://raw.githubusercontent.com/Footagesus/WindUI/main/dist/main.lua"))()
local Window = WindUI:CreateWindow({
Title = "My Hub",
Icon = "star",
Theme = "Dark",
Folder = "MyHub",
})
local Tab = Window:Tab({
Title = "Main",
Icon = "home",
})
Tab:Toggle({
Title = "Enable Feature",
Value = false,
Callback = function(state)
print("Feature enabled:", state)
end,
})
Tab:Space()
Tab:Button({
Title = "Run Action",
Icon = "play",
Callback = function()
print("Button clicked")
end,
})
Tab:Space()
Tab:Slider({
Title = "Walk Speed",
Step = 1,
Value = {
Min = 16,
Max = 100,
Default = 16,
},
Callback = function(value)
game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = value
end,
})
Tab:Space()
Tab:Dropdown({
Title = "Select Team",
Values = { "Red", "Blue", "Green" },
Value = 1,
Callback = function(selectedValue)
print("Team selected:", selectedValue)
end,
})
WindUI:Notify({
Title = "Hub Loaded",
Content = "Welcome! My Hub is ready.",
Icon = "solar:bell-bold",
Duration = 5,
})
Add a Flag string to any element (e.g. Flag = "WalkSpeed") to opt it into the config system. Use Window.ConfigManager:Config("default"):Save() and :Load() to persist values between sessions — no extra code needed per element.