Orbital UI. ‎

A new, Configurable UI Library for Roblox executors. Supporting custom themes, 20+ themes, saved Element Configurations, Saved Settings 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/Orbital%20UI.lua"))()
Read Documentation UI Github Demo Hub

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 official 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/Orbital%20UI.lua")

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(true -- 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 22 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 = "name",
    URL = "url",
    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(true -- 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")

Add Keybind

ui:AddSettingKeybind({
    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)

Atomiko UI. ‎

SugaBlaz's Executor UI Library (Lite Version). A minimal, and easy-to-use alternative to Orbital UI. Perfect for simple scripts not needing to be too flashy and have tabs, smooth drag interactions, and essential UI elements.

loadstring(game:HttpGet("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/Atomiko%20UI.lua"))()
Essential

6 Core Elements

Draggable

Smooth Movement

Easy Setup

Simple Syntax

01. Initialization (Atomiko) 

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 ui = safeloadstring("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/Atomiko%20UI.lua")

02. Creating a Window 

local window1 = ui:CreateWindow({
    Name = "Demo", 
    Size = UDim2.new(0, 250, 0, 250), 
    Position = UDim2.new(0.5, 0, 0.5, 0)
})

Add Button (Atomiko)

local button = window1:AddButton({
    Text = "Button", 
    Callback = function()
        print("clicked")
    end
})

Add Toggle (Atomiko)

local Toggle = window1:AddToggle({
    Text = "Toggle", 
    Default = true, 
    Callback = function(state)
        print(state)
    end
})

Setting a Toggle:

Toggle:Set(false)

Add Slider (Atomiko)

local Slider = window1:AddSlider({
    Text = "Slider", 
    Min = 0, 
    Max = 60, 
    Default = 9, 
    Callback = function(val)
        print(val)
    end
})

Setting a Slider:

Slider:Set(30)

Add Text Box (Atomiko)

local textbox = window1:AddTextbox({
    Text = "Something",
    Placeholder = "Enter",
    Callback = function(text)
        print(text)
    end
})

Setting a Text Box:

textbox:Set("New Text")

Add Label (Atomiko)

local label = window1:AddLabel({
    Text = "Testing"
})

Nebula UI. ‎

SugaBlaz's newest and most code optimized UI Library. Comes with a key system, highly flexible configurable settings, rich components, and a sleek tab-based interface designed heavily for aesthetics.

loadstring(game:HttpGet("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/Nebula%20UI.lua"))()
Key System

Built-in

Advanced

Full Customization

Code Optimized

Code Is readable

Saved Configs

Flags Auto-save

01. Initialization (Nebula) 

local Library = loadstring(game:HttpGet("https://raw.githubusercontent.com/SugaBlaz/UI-Library/refs/heads/main/Nebula%20UI.lua"))()

local Window = Library:CreateWindow({
    Name = "Nebula Demo",
    Theme = "Midnight", -- Custom, Dark, Light, Midnight, Mint, Blood, Ocean, Grape, Obsidian
    SaveName = "Nebula_Config",
    Size = UDim2.new(0.5, 0, 0.5, 0),
    Position = UDim2.new(0.5, 0, 0.5, 0),
    KeySystem = true, 
    KeySettings = {
        Title = "Key System",
        Key = "1234",
        InsertKeyAtEnd = false,
        SaveKey = true, 
        KeyLink = "https://discord.gg/yourserver", 
        Callback = function()
            print("Authenticated!")
        end
    }
})

Note: Nebula UI automatically creates a ⚙ Settings tab loaded with custom theme builders specifically bound to the JSON saving module.

02. Tabs & Sections 

-- Create a tab
local Tab1 = Window:CreateTab("Tab 1")
local Tab2 = Window:CreateTab("Tab 2")

-- Adding a Section inside the Tab
Tab1:CreateSection("Section 1")

Add Button (Nebula)

Tab1:CreateButton({
    Name = "Button 1",
    Callback = function()
        print("Clicked Nebula Button!")
    end
})

Add Toggle (Nebula)

local Toggle = Tab1:CreateToggle({
    Name = "Toggle",
    CurrentValue = false,
    Flag = "Toggle1", -- Identifier for JSON Saving
    Callback = function(State)
        print("Toggle is:", State)
    end
})

Update the Toggle dynamically:

Toggle:Set(true)

Add Slider (Nebula)

local Slider = Tab1:CreateSlider({
    Name = "Slider",
    Range = {0, 100},
    CurrentValue = 50,
    Flag = "Slider1",
    Callback = function(Value)
        print("Slider value:", Value)
    end
})

Set Slider via code:

Slider:Set(75)

Add Dropdown (Nebula)

local Dropdown = Tab1:CreateDropdown({
    Name = "Dropdown",
    Options = {"Option 1", "Option 2", "Option 3"},
    CurrentOption = "Option 1",
    Flag = "Dropdown1",
    Callback = function(Option)
        print("Selected:", Option)
    end
})

Set or Update Options:

Dropdown:Set("Option 2")
Dropdown:Update({"New 1", "New 2"})

Add Multi-Dropdown (Nebula)

local MultiDropdown = Tab2:CreateMultiDropdown({
    Name = "Multi Dropdown",
    Options = {"Item A", "Item B", "Item C"},
    CurrentOptions = {"Item A"},
    Flag = "Multi1",
    Callback = function(Selected)
        print("Selected items:", table.concat(Selected, ", "))
    end
})

Set or Update Selected Values:

MultiDropdown:Set({"Item B", "Item C"})
MultiDropdown:Update({"Item X", "Item Y"})

Add Textbox (Nebula)

local Textbox = Tab3:CreateTextbox({
    Name = "Textbox",
    CurrentValue = "",
    PlaceholderText = "Type here...",
    Flag = "Text1",
    Callback = function(Text)
        print("Textbox input:", Text)
    end
})

Modify Input via Code:

Textbox:Set("Auto Typed")

Add Color Picker (Nebula)

local ColorPicker = Tab2:CreateColorPicker({
    Name = "Color Picker",
    Color = Color3.fromRGB(255, 255, 255),
    Flag = "Color1",
    Callback = function(Color)
        print("Color picked:", Color)
    end
})

Add Keybind (Nebula)

local Keybind = Tab1:CreateKeybind({
    Name = "Keybind",
    CurrentKey = "E",
    Flag = "Keybind1",
    Callback = function(Key)
        print("Keybind pressed:", Key)
    end
})

Force Key Assignment:

Keybind:Set("R")

Add Label (Nebula)

local Label = Tab3:CreateLabel("This is a Label")

Change Label text:

Label:Set("New text assigned!")

03. Notifications & Misc Functions

Fire a Notification

Library:Notify({
    Title = "Notification",
    Text = "This is a test notification.",
    Duration = 3
})

Destroy GUI Application

Completely destroys the Nebula UI from the screen environment.

Library:Destroy()

Utilize the Hidden Settings Tab

By default, `Library:CreateWindow` initializes a Settings frame (Window.SettingsTab) that manages Theme modifications. You can insert logic specifically into it like so:

Window.SettingsTab:CreateSection("Library Controls")

Window.SettingsTab:CreateButton({
    Name = "Destroy UI",
    Callback = function()
        Library:Destroy()
    end
})