Designed for Configurability,
Built for Scripters.
A new, Configurable UI Library for Roblox executors. Supporting custom themes, 20+ themes, saved configurations, and 12+ atomic elements. Made with passion by SugaDev and AzkaDev.
loadstring(game:HttpGet("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/MainUI"))()
Why you should choose this UI Library?
Because:
Built-in Default Themes
JSON Config System
Auto-saves
Error Handling Included
Key System Included
Code Not obfuscated
Almost everything is configurable
SBEUI is frequently updated
Find a feature you cant live without?
You can either:
Make it yourself (if your a scripter)
OR:
Submit it on the offical Discord server Forums
01. Library Initialization & Bootstrapper
function safeloadstring(url) local code = game:HttpGet(url) local func, errorMessage = loadstring(code) if func then print("Script compiled! Executing...") return func() else warn("LOADSTRING FAILED: " .. tostring(errorMessage)) return nil end end local UILibrary = safeloadstring("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/MainUI") local ui = UILibrary.Main.new({ TitleText = "Universal Hub", Size = UDim2.new(0, 175, 0, 225), Position = UDim2.new(0.5, -140, 0.5, -190), SettingSize = UDim2.new(0, 250, 0, 250), TitleHeight = 30, CornerRadius = 6, ElementPadding = 6, Font = Enum.Font.GothamBold, TextSize = 12, SectionHeight = 20, UIStrokeThickness = 1, SliderColor = Color3.fromRGB(54, 54, 54), NotifcationSound = "rbxassetid://80833448337193", ResetOnSpawn = false, Addons = {}, -- Addons to your Key link KeySystemEnabled = false, TabPadding = 10, UseOwnTheme = false, Key = nil -- Your cloud worker key verifier / static link / string KeyLink = nil -- Your Key Link eg. Lootlabs, Linkvertise, etc Theme = "Serenity", -- You can choose any themes SaveOnExit = true, }) ui:CreateUI()
Add Section
ui:AddSection("Main Elements")
Add Dropdown
ui:AddDropdown({
Text = "Select Something",
Default = "Option 1",
Options = {"Option 1", "Option 2", "Option 3"},
Callback = function(selectedOption)
print("User selected: " .. selectedOption)
end,
Flag = "D1",
SavingEnabled = true
})
Setting a Dropdown:
dropdown:Set("Option")
Updating a Dropdown:
dropdown:Update ( {"Option1", "Option2", "Option3"}, true -- Clears your selected option before the dropdown update. )
Add Multi-Dropdown
ui:AddMultiDropdown({
Text = "Multi Select",
Flag = "MD1",
Options = {"O1","O2","O3","O4"},
Default = {"O1", "O4"}, -- Can be a table for multiple defaults
Callback = function(selectedList)
print("Currently selected items:")
for _, item in pairs(selectedList) do
print("- " .. item)
end
end,
SavingEnabled = true
})
Setting a MultiDropdown:
multidropdown:Set("Option1", "Option2", "Option3")
Updating a MultiDropdown:
multidropdown:Update ( {"Option1", "Option2", "Option3"}, true -- Clears your selected options before the dropdown update. )
Add Toggle
ui:AddToggle({
Text = "Toggle",
Default = false,
Callback = function(state)
print("state changed", state)
end,
Flag = "T1",
SavingEnabled = true
})
Setting a Toggle:
toggle:Set(boolean -- true or false)
Add Slider
ui:AddSlider({
Text = "Slider",
Default = 16,
Min = 0,
Max = 200,
Flag = "S1",
SavingEnabled = true,
Callback = function(num)
print("num:",num)
end,
})
Setting a Slider:
slider:Set(100 -- Must be in the range of the mininum number and maximum number in the slider)
Add Separator
ui:AddSeparator()
Add Text Box
ui:AddTextBox({
Text = "Text Box",
Default = "Text Box",
Placeholder = "Text Box",
Callback = function(text)
print(text)
end,
Flag = "TB1",
SavingEnabled = true
})
Setting a TextBox:
textbox:Set("123 Bananas")
Add Color Picker
ui:AddColorPicker({
Text = "Color Picker",
Default = Color3.fromRGB(0, 255, 255),
Flag = "CP1",
SavingEnabled = true,
Callback = function(selectedColor)
print("New color selected: ", selectedColor)
end
})
Setting a Color Picer:
colorpicker:Set({R = 255, G = 255, B = 255})
Add Keybind
ui:AddKeybind({
Text = "Keybind",
Default = Enum.KeyCode.F2,
Callback = function()
print("Keybind triggered!")
end,
Flag = "KB1",
SavingEnabled = true,
ChangedCallback = function(newKey)
print("Bind changed to: " .. newKey.Name)
end
})
Setting a Keybind:
keybind:Set(Enum.KeyCode.F)
Add Label
ui:AddLabel("Text Here") ui:AddLabel("Running "..ui:GetVersion())
02. Themes
SBEUILIB includes 17 built-in presets designed for different interface aesthetics. Themes control background color, accent color, contrast, and component styling. You can select a preset using the Theme parameter during initialization or enable full manual customization using UseOwnTheme.
local ui = UILibrary.Main.new({ TitleText = "Universal Hub", Theme = "Obsidian", -- Choose any preset below UseOwnTheme = false, SaveOnExit = true, })
Available Presets
Custom Themes and Colors
As of version 1.9, You can add your own themes and colors without having to use default themes. (Note if a color is missing the script will automatically make it default color)
local ui = UILibrary.Main.new({ TitleText = "Universal Hub", Theme = "Default", -- nil or default (fallback) Colors = {...}, UseOwnTheme = true, SaveOnExit = true, })
Custom Theme / Color Template:
{
TitleColor = Color3.fromRGB(255, 255, 255),
CollapseBtnColor = Color3.fromRGB(25, 25, 25),
ButtonColor = Color3.fromRGB(45, 45, 45),
ButtonHoverColor = Color3.fromRGB(60, 60, 60),
ToggleColor = Color3.fromRGB(45, 45, 45),
ToggleColorOFF = Color3.fromRGB(200, 60, 60),
ToggleColorON = Color3.fromRGB(60, 200, 60),
MainFrameColor = Color3.fromRGB(35, 35, 35),
SeparatorColor = Color3.fromRGB(70, 70, 70),
TextBoxColor = Color3.fromRGB(45, 45, 45),
AccentColor = Color3.fromRGB(0, 120, 215),
SectionColor = Color3.fromRGB(90, 90, 90),
LabelColor = Color3.fromRGB(200, 200, 200),
SliderColor = Color3.fromRGB(70, 70, 70),
SliderHandleColor = Color3.fromRGB(100, 100, 100),
UIStrokeColor = Color3.fromRGB(60, 60, 60),
LoadingBarColor = Color3.fromRGB(0, 155, 255),
TabColor = Color3.fromRGB(55, 55, 55),
}
03. Other functions
Other functions that you can use for script, well, most of them being useless.
Notifications
Notifications are important if your script doesnt want to feel lifeless.
ui:Notify({ Title = "Bananas", Text = "I like bananas", Duration = 3, StartPosition = UDim2.new(1, 0, 0.776, 0), EndPosition = UDim2.new(0.724, 0, 0.776, 0), TweenTime = 0.5 })
Create Fake Loading
Initializes a customizable loading splash screen. This is perfect for simulating a "booting" sequence before your main UI appears.
ui:CreateFakeLoading({ Title = "SBEUILIB Systems", Description = "Initializing Framework...", Size = UDim2.new(0, 250, 0, 180), WaitTime = {0.1, 0.5}, -- Min/Max tween speed WaitTime2 = {0.5, 1.5}, -- Delay between jumps CallBack = function() print("Loading finished!") end })
Toggle Minimize
Collapses or expands the main frame. When minimized, only the title bar remains visible.
ui:ToggleMinimize()
Toggle GUI Visibility
Toggles the visibility of the entire ScreenGui. Use this for your main "Open/Close" keybind.
ui:ToggleGuiVisibility()
Set Title
Updates the text displayed in the main window's title bar dynamically.
ui:SetTitle("Updated Hub Name")
Set Theme
Swaps the current UI colors to another built-in preset instantly. (Note: Doesnt work for now.)
ui:SetTheme("Midnight")
Frame Visibility
Changes the ui main frame visibility. Good for making open/close buttons.
ui:ToggleFrameVisibility()
04. Custom Settings
This is optional, since settings are left blank by default. You can choose to add this, since this is preferally better to add. Basically the UI library main elements, but in a setting frame.
Add Dropdown
ui:AddSettingDropdown({
Text = "Select Something",
Default = "Option 1",
Options = {"Option 1", "Option 2", "Option 3"},
Callback = function(selectedOption)
print("User selected: " .. selectedOption)
end,
Flag = "D1",
SavingEnabled = true
})
Setting a Dropdown:
dropdown:Set("Option")
Updating a Dropdown:
dropdown:Update ( {"Option1", "Option2", "Option3"}, true -- Clears your selected option before the dropdown update. )
Add Multi-Dropdown
ui:AddSettingMultiDropdown({
Text = "Multi Select",
Flag = "MD1",
Options = {"O1","O2","O3","O4"},
Default = {"O1", "O4"}, -- Can be a table for multiple defaults
Callback = function(selectedList)
print("Currently selected items:")
for _, item in pairs(selectedList) do
print("- " .. item)
end
end,
SavingEnabled = true
})
Setting a MultiDropdown:
multidropdown:Set("Option1", "Option2", "Option3")
Updating a MultiDropdown:
multidropdown:Update ( {"Option1", "Option2", "Option3"}, true -- Clears your selected options before the dropdown update. )
Add Toggle
ui:AddSettingToggle({
Text = "Toggle",
Default = false,
Callback = function(state)
print("state changed", state)
end,
Flag = "T1",
SavingEnabled = true
})
Setting a Toggle:
toggle:Set(boolean -- true or false)
Add Slider
ui:AddSettingSlider({
Text = "Slider",
Default = 16,
Min = 0,
Max = 200,
Flag = "S1",
SavingEnabled = true,
Callback = function(num)
print("num:",num)
end,
})
Setting a Slider:
slider:Set(100 -- Must be in the range of the mininum number and maximum number in the slider)
Add Text Box
ui:AddSettingTextBox({
Text = "Text Box",
Default = "Text Box",
Placeholder = "Text Box",
Callback = function(text)
print(text)
end,
Flag = "TB1",
SavingEnabled = true
})
Setting a TextBox:
textbox:Set("123 Bananas")