Designed for Configurability,
Built for Scripters.

A new, Configurable UI Library for Roblox executors. Supporting custom themes, 15+ 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"))()
Read Documentation GitHub Repository
Themes

Built-in Default Themes

Auto-Saving

JSON Config System

Settings

Auto-saves

Safe Load

Error Handling Included

Utility

Utility Module Included

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),
    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,
    Theme = "Serenity",  -- You can choose any themes
    SaveOnExit = true,
})

Add Section

ui:AddSection("Main Elements")

Add Button

ui:AddButton({
    Text = "Btn",
    TextSize = 14,
    Callback = function()
        print("clicked")
    end,
})

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
})

Add Toggle

ui:AddToggle({
    Text = "Toggle",
    Default = false,
    Callback = function(state)
        print("state changed", state)
    end,
    Flag = "T1",
    SavingEnabled = true
})

Add Slider

ui:AddSlider({
    Text = "Slider",
    Default = 16,
    Min = 0,
    Max = 200,
    Flag = "S1",
    SavingEnabled = true,
    Callback = function(num)
        print("num:",num)
    end,
})

Add Separator

ui:AddSeparator()

Add Text Box

ui:AddTextBox({
    Text = "Text Box",
    Default = "Text Box",
    Placeholder = "Text Box",
    Callback = function(text)
        print(text)
    end,
})

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
})

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
})

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),
}