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:

Themes

Built-in Default Themes

Auto-Saving

JSON Config System

Settings

Auto-saves

Safe Load

Error Handling Included

Key System

Key System Included

Open Sourced

Code Not obfuscated

Configurability

Almost everything is configurable

Frequently Updated

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

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

Make Draggable Button

Creates a standalone, draggable image button that can be placed anywhere on the screen.

ui:MakeDraggableButton({
    Name = "ToggleIcon",
    URL = "rbxassetid://12345678",
    Size = UDim2.new(0, 50, 0, 50),
    Position = UDim2.new(0, 20, 0, 20),
    Callback = function()
        ui:ToggleGuiVisibility()
    end
})

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 Button

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

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