AtomUI — Docs

Introduction #

AtomUI is a fully self-contained Lua UI library for Roblox executor scripts. It provides a polished windowed interface with sections, tabs, groups, and a wide range of interactive elements — all with mobile and PC support, smooth animations, config persistence, and a live ESP preview panel.

✦

No dependencies. The library loads entirely from one file. Icons are fetched lazily from a GitHub-hosted icon pack. This library is public — anyone can use it. Hub scripts can customise the toggle button logo via ToggleImage in the config.

Loading #

Paste this at the top of any script. The library returns a table — assign it to a variable.

lua

local AtomUI = loadstring(game:HttpGet(
    "https://raw.githubusercontent.com/VoidDeveloper67/AtomUI/refs/heads/main/AtomUI.lua"
))()

Quick Start #

lua

local AtomUI = loadstring(game:HttpGet(
    "https://raw.githubusercontent.com/VoidDeveloper67/AtomUI/refs/heads/main/AtomUI.lua"
))()

local lib = AtomUI.new({
    Name        = "VoidHub",
    ToggleImage = "rbxassetid://YOUR_ICON_ID",  -- your hub's logo
    AccentColor = Color3.fromRGB(138, 43, 226),
    AutoConfig  = true
})

local section = lib:AddSection({ Name = "Main", Icon = "sword" })
local tab     = section:AddTab({ Name = "Combat", Icon = "crosshair" })
local group   = tab:AddGroup({ Name = "Settings", Side = "Left" })

group:AddToggle({
    Name     = "Auto Farm",
    Default  = false,
    Callback = function(val) print("Auto Farm:", val) end
})

lib:Notify({ Title = "VoidHub", Description = "Loaded!", Duration = 4 })

Structure #

AtomUI uses a four-level hierarchy. Every UI element lives inside a Group.

lib └─ Section ← lib:AddSection() └─ Tab ← section:AddTab() └─ Group ← tab:AddGroup() └─ Elements (Toggle, Slider, Button, ...)

atom_ui.new() #

Creates and renders the UI window. Returns a lib instance.

lua

local lib = AtomUI.new({
    Name            = "VoidHub",
    ToggleImage     = "rbxassetid://YOUR_ICON_ID",  -- your hub's logo
    AccentColor     = Color3.fromRGB(138, 43, 226),
    BackgroundColor = Color3.fromRGB(16, 16, 16),
    SecondaryColor  = Color3.fromRGB(18, 18, 18),
    TextColor       = Color3.fromRGB(255, 255, 255),
    SubTextColor    = Color3.fromRGB(124, 124, 124),
    AutoConfig      = true
})

Field	Type	Default	Description
Name	string	"o11 vision"	Window title
AccentColor	Color3	Blue	Main accent / highlight color
BackgroundColor	Color3	RGB(16,16,16)	Window background
SecondaryColor	Color3	RGB(18,18,18)	Secondary panel color
TextColor	Color3	White	Primary text color
SubTextColor	Color3	Grey	Secondary / dim text
AutoConfig	bool	false	Auto save & restore all control values
ToggleImage	string	nil	Custom rbxassetid:// for the toggle button & watermark logo. Lets each hub set its own icon.

Sections #

Sections are the top-level navigation items shown in the sidebar of the window.

lua

local section = lib:AddSection({
    Name = "Main",
    Icon = "sword"  -- lucide icon name or rbxassetid://
})

Tabs #

Tabs live inside sections and appear as clickable buttons at the top of the content area.

lua

local tab = section:AddTab({
    Name        = "Combat",
    Description = "Combat settings",  -- optional subtitle
    Icon        = "crosshair"
})

Groups #

Groups are columns inside a tab. Set Side to "Left" or "Right" to position them.

lua

local group = tab:AddGroup({
    Name = "Aimbot",
    Side = "Left",   -- "Left" or "Right"
    Icon = "target"
})

Toggle #

A boolean on/off switch.

lua

group:AddToggle({
    Name     = "Auto Farm",
    Default  = false,
    Callback = function(val)
        -- val: boolean
    end
})

Slider #

A draggable numeric slider with min, max, and increment support.

lua

group:AddSlider({
    Name      = "FOV",
    Min       = 10,
    Max       = 800,
    Default   = 120,
    Increment = 5,
    Callback  = function(val)
        -- val: number
    end
})

Button #

A clickable button that fires a callback immediately on press.

lua

group:AddButton({
    Name     = "Rejoin Server",
    Callback = function()
        -- fires on click
    end
})

Dropdown #

A single-select dropdown list.

lua

group:AddDropdown({
    Name     = "Target Part",
    Options  = { "Head", "HumanoidRootPart", "Torso" },
    Default  = "Head",
    Callback = function(val)
        -- val: string
    end
})

MultiDropdown #

A multi-select dropdown — callback receives a table of all selected values.

lua

group:AddMultiDropdown({
    Name     = "Notifications",
    Options  = { "Kills", "Deaths", "Chat", "Joins" },
    Default  = { "Kills", "Chat" },
    Callback = function(val)
        -- val: table of selected strings
    end
})

Keybind #

A rebindable key. Callback fires every time the key is pressed.

lua

group:AddKeybind({
    Name     = "Fly Key",
    Default  = Enum.KeyCode.F,
    Callback = function()
        -- fires on key press
    end
})

KeybindToggle #

Combines a keybind with a toggle state — each press flips the bool.

lua

group:AddKeybindToggle({
    Name          = "Aimbot Hotkey",
    Default       = Enum.KeyCode.E,
    ToggleDefault = false,
    Callback      = function(val)
        -- val: boolean (toggle state)
    end
})

ColorPicker #

lua

group:AddColorPicker({
    Name     = "ESP Color",
    Default  = Color3.fromRGB(255, 0, 0),
    Callback = function(val)
        -- val: Color3
    end
})

TextInput #

A text field. Callback fires when the player presses Enter or unfocuses.

lua

group:AddTextInput({
    Name            = "Webhook URL",
    Default         = "",
    PlaceholderText = "https://...",
    Callback        = function(val)
        -- val: string
    end
})

Label #

lua

group:AddLabel({ Name = "Visuals are client-side only." })

Divider #

lua

group:AddDivider()

Notify #

Shows a toast notification in the corner of the screen.

lua

lib:Notify({
    Title       = "VoidHub",
    Description = "Config saved!",
    Duration    = 4  -- seconds
})

Visibility #

lua

lib:Toggle()                                                    -- flip open/closed
lib:SetToggleKey(Enum.KeyCode.RightControl)         -- change hotkey
lib:SetToggleVisible(true)                              -- show/hide toggle button
lib:SetToggleImage("rbxassetid://YOUR_ICON_HERE") -- set custom hub logo at runtime

ℹ

Default toggle key is RightControl. Players can rebind it via the built-in settings tab.

Theming #

lua

-- Change accent color at runtime
lib:SetAccentColor(Color3.fromRGB(138, 43, 226))

-- Font preset (1–10)
-- 1=Gotham  2=Gotham Medium  3=Montserrat  4=Nunito
-- 5=Bodoni  6=Garamond  7=Source Sans  8=Highway  9=Antique  10=Code
lib:SetFontPreset(1)

Config #

Saves and loads all control values to/from a file. When AutoConfig = true this happens automatically.

lua

lib:SaveConfig("voidhub_cfg")   -- writes to file
lib:LoadConfig("voidhub_cfg")   -- reads from file

Destroy #

Removes all UI instances and disconnects every connection. Call this on script unload.

lua

lib:Destroy()

Full Script #

A complete VoidHub-style script showing all major features.

lua

local AtomUI = loadstring(game:HttpGet(
    "https://raw.githubusercontent.com/VoidDeveloper67/AtomUI/refs/heads/main/AtomUI.lua"
))()

local lib = AtomUI.new({
    Name        = "VoidHub",
    ToggleImage = "rbxassetid://YOUR_ICON_ID",  -- your hub's logo
    AccentColor = Color3.fromRGB(138, 43, 226),
    AutoConfig  = true
})

-- ─── Main Section ───────────────────────────────────────
local main = lib:AddSection({ Name = "Main", Icon = "sword" })

local combat = main:AddTab({ Name = "Combat", Icon = "crosshair" })

local aimbot = combat:AddGroup({ Name = "Aimbot", Side = "Left", Icon = "target" })
aimbot:AddToggle({ Name = "Enabled", Default = false, Callback = function(v) end })
aimbot:AddSlider({ Name = "FOV", Min = 10, Max = 800, Default = 120, Increment = 5, Callback = function(v) end })
aimbot:AddDropdown({ Name = "Target", Options = {"Head","Torso"}, Default = "Head", Callback = function(v) end })
aimbot:AddKeybindToggle({ Name = "Hotkey", Default = Enum.KeyCode.E, ToggleDefault = false, Callback = function(v) end })

local visuals = combat:AddGroup({ Name = "Visuals", Side = "Right", Icon = "eye" })
visuals:AddToggle({ Name = "ESP", Default = false, Callback = function(v) end })
visuals:AddColorPicker({ Name = "ESP Color", Default = Color3.fromRGB(255,0,0), Callback = function(v) end })

-- ─── Player Tab ─────────────────────────────────────────
local player = main:AddTab({ Name = "Player", Icon = "user" })

local movement = player:AddGroup({ Name = "Movement", Side = "Left", Icon = "move" })
movement:AddToggle({ Name = "Speed Hack", Default = false, Callback = function(v) end })
movement:AddSlider({ Name = "Walk Speed", Min = 16, Max = 200, Default = 16, Increment = 1, Callback = function(v) end })
movement:AddSlider({ Name = "Jump Power", Min = 50, Max = 500, Default = 50, Increment = 5, Callback = function(v) end })

-- ─── Config Section ──────────────────────────────────────
local cfg_sec = lib:AddSection({ Name = "Config", Icon = "settings" })
local cfg_tab = cfg_sec:AddTab({ Name = "Settings", Icon = "save" })
local cfg     = cfg_tab:AddGroup({ Name = "Config", Side = "Left", Icon = "hard-drive" })

cfg:AddButton({ Name = "Save", Callback = function()
    lib:SaveConfig("voidhub")
    lib:Notify({ Title = "Config", Description = "Saved!", Duration = 3 })
end })

cfg:AddButton({ Name = "Load", Callback = function()
    lib:LoadConfig("voidhub")
    lib:Notify({ Title = "Config", Description = "Loaded!", Duration = 3 })
end })

lib:Notify({ Title = "VoidHub", Description = "Press RightCtrl to toggle.", Duration = 5 })