Responsive
The complete interface automatically scales to fit the current viewport while keeping its proportions.
```html
VAULTRA UI v4.4.1
Vaultra UI is a responsive Roblox interface library designed for desktop and mobile. Build tabs, sections, toggles, sliders, dropdowns, textboxes, keybinds, notifications, persistent settings, custom backgrounds and optional key systems from one library.
OVERVIEW
Vaultra UI gives Roblox scripts a complete interface without requiring you to manually build every ScreenGui, frame, control, animation and mobile layout.
The library automatically creates the main window, navigation, search system, Home tab, Settings tab, window controls, notifications and responsive scaling system.
The complete interface automatically scales to fit the current viewport while keeping its proportions.
Mouse, keyboard and touch input are handled by the library with larger mobile-friendly controls where needed.
Save developer flags, built-in appearance settings and key system data when file APIs are available.
The built-in search bar can search tab names, control names and control descriptions.
Change backgrounds, transparency, sizing, theme colors, icons, window information and other appearance options.
Protect scripts using an API, custom Lua validator, a list of static keys or a single static key.
START HERE
Load Vaultra UI once near the top of your script.
local Vaultra = loadstring(game:HttpGet("https://vaultra.pages.dev/ui.lua"))()
The returned Vaultra table is then used to create your
window.
WINDOW
Call Vaultra:CreateWindow() to create the interface.
Unless disabled, the Home tab is automatically added.
The Settings tab is also automatically created.
local Window = Vaultra:CreateWindow({
Title = "Vaultra Hub",
Subtitle = "My Script",
Background = "1020120447",
BackgroundType = "auto",
BackgroundTransparency = 0.08,
TintTransparency = 0.66,
ToggleKey = Enum.KeyCode.RightShift,
ServerStatus = "Online",
HomeDescription = "Welcome to my script.",
HomeStatuses = {
Version = "1.0.0",
Module = "Universal",
Status = "Ready"
}
})
You do not need to provide every option. Vaultra UI includes defaults for the normal window configuration.
Main name displayed in the top bar and Home page.
Title = "Vaultra Hub"
Smaller text displayed underneath the window title.
Subtitle = "Universal"
Optional internal ScreenGui name and identifier used by some save paths.
Name = "VaultraHub"
Overrides the automatically displayed Roblox display name.
Username = "Custom Name"
Changes the design width before responsive scaling is applied.
Width = 900
Keyboard key used to show or hide the complete interface.
ToggleKey = Enum.KeyCode.RightShift
Changes the Roblox ScreenGui display order.
DisplayOrder = 999
Allows you to manually choose the ScreenGui parent.
Parent = game.Players.LocalPlayer.PlayerGui
Set to false if you do not want the automatic Home
tab.
Home = false
Initial server status shown inside the automatic Home page.
ServerStatus = "Online"
Main information paragraph shown inside the Home tab.
HomeDescription = "Welcome to Vaultra."
Adds custom entries to the Home status section.
HomeStatuses = {
Version = "1.0.0",
Module = "MM2"
}
CUSTOMIZATION
A custom Theme table can override the default Vaultra
colors.
local Window = Vaultra:CreateWindow({
Title = "Custom Theme",
Theme = {
Backdrop = Color3.fromRGB(7, 9, 18),
Glass = Color3.fromRGB(22, 26, 43),
GlassBright = Color3.fromRGB(41, 47, 72),
Control = Color3.fromRGB(30, 35, 55),
ControlHover = Color3.fromRGB(44, 51, 78),
Text = Color3.fromRGB(246, 248, 255),
Muted = Color3.fromRGB(167, 176, 202),
Accent = Color3.fromRGB(124, 92, 255),
Accent2 = Color3.fromRGB(174, 151, 255),
Success = Color3.fromRGB(50, 221, 145),
Danger = Color3.fromRGB(255, 91, 115),
Stroke = Color3.fromRGB(255, 255, 255)
}
})
You only need to include colors you want to replace. Missing theme values continue using Vaultra's defaults.
Vaultra UI can display Roblox image assets, thumbnails, decal/asset references and supported web images.
local Window = Vaultra:CreateWindow({
Title = "Background Example",
Background = "1020120447",
BackgroundType = "auto",
BackgroundTransparency = 0.08,
TintTransparency = 0.66,
BackgroundScaleType = Enum.ScaleType.Crop
})
Background = "1020120447"
Background = "rbxassetid://1020120447"
Background = "decal://1020120447"
Background = "asset://1020120447"
Background = "rbxthumb://type=Asset&id=1020120447&w=768&h=432"
Background = "https://example.com/image.png"
Direct https:// images require an environment that
supports request functionality, writefile and
getcustomasset or an equivalent custom asset function.
LAYOUT
Tabs appear inside the navigation panel on the left side of the interface.
local Main = Window:CreateTab({
Name = "Main",
Icon = "◆"
})
local Player = Window:CreateTab({
Name = "Player",
Icon = "★"
})
local Misc = Window:CreateTab({
Name = "Misc",
Icon = "⚙"
})
local Main = Window:CreateTab({
Name = "Main",
Icon = "73063376060866",
IconType = "image"
})
Tab names and registered controls can automatically be discovered by the window search bar.
Controls are placed inside sections. A tab can contain as many sections as you need.
local Main = Window:CreateTab({
Name = "Main",
Icon = "◆"
})
local General = Main:AddSection("General")
local Automation = Main:AddSection("Automation")
local Other = Main:AddSection("Other")
You can also pass the section name inside a table.
local General = Main:AddSection({
Name = "General"
})
CONTROLS
Vaultra UI v4.4.1 includes interactive controls and information elements that can be mixed inside any section.
Runs an action when pressed.
Stores an enabled or disabled state.
Selects a number between a minimum and maximum.
Selects an item from a list of options.
Allows the user to enter text.
Lets the user assign and activate a keyboard key.
Displays simple information text.
Displays a title with a larger information block.
Separates groups of controls inside a section.
Buttons execute their callback every time they are pressed.
local RunButton = General:AddButton({
Name = "Run Action",
Description = "Runs the example action.",
ButtonText = "Run",
Callback = function()
print("Button clicked")
end
})
RunButton:SetText("Completed")
Toggles are useful for features that can remain enabled or disabled.
local AutoFarmToggle = General:AddToggle({
Name = "Auto Farm",
Description = "Automatically farms while enabled.",
Default = false,
Flag = "AutoFarm",
Callback = function(value)
print("Auto Farm:", value)
end
})
AutoFarmToggle:Set(true)
local Enabled = AutoFarmToggle:Get()
print(Enabled)
Sliders select a number between Min and
Max. Use Step to control how values are
rounded.
local SpeedSlider = General:AddSlider({
Name = "Speed",
Description = "Controls movement speed.",
Min = 1,
Max = 100,
Step = 1,
Default = 20,
Suffix = " studs",
Flag = "Speed",
Callback = function(value)
print("Speed:", value)
end
})
SpeedSlider:Set(50)
local Speed = SpeedSlider:Get()
Dropdowns allow the user to choose one item from a list.
local ModeDropdown = General:AddDropdown({
Name = "Mode",
Description = "Choose the current mode.",
Options = {
"Normal",
"Fast",
"Safe"
},
Default = "Normal",
AllowNone = false,
Flag = "Mode",
Callback = function(value)
print("Selected:", value)
end
})
By default, dropdowns support a None option.
AllowNone = true
When None is selected, the callback receives
nil.
ModeDropdown:Set("Fast")
local Selected = ModeDropdown:Get()
ModeDropdown:Refresh({
"Normal",
"Fast",
"Safe",
"Extreme"
})
ModeDropdown:Close()
Textboxes collect user-entered text. The callback runs when the textbox loses focus.
local MessageBox = General:AddTextbox({
Name = "Message",
Description = "Enter a message below.",
Placeholder = "Type here...",
Default = "",
Flag = "Message",
Callback = function(value, enterPressed)
print("Message:", value)
print("Enter pressed:", enterPressed)
end
})
MessageBox:Set("Hello")
local Message = MessageBox:Get()
A keybind can run a callback when its assigned keyboard key is pressed. Users can also change the key directly from the UI.
local ActionKey = General:AddKeybind({
Name = "Action Key",
Description = "Press this key to run the action.",
Default = Enum.KeyCode.F,
Flag = "ActionKey",
Changed = function(newKey)
print("New key:", newKey.Name)
end,
Callback = function(key)
print("Pressed:", key.Name)
end
})
ActionKey:Set(Enum.KeyCode.G)
local Key = ActionKey:Get()
Labels display a simple piece of text and can be updated later.
local StatusLabel = General:AddLabel("Status: Ready")
StatusLabel:Set("Status: Running")
Paragraphs are useful for descriptions, instructions and larger information areas.
General:AddParagraph({
Title = "Information",
Content = "This is a longer description shown inside the interface."
})
General:AddDivider()
General:AddDivider("Advanced")
Many controls return an object that lets you modify or read the control after it has been created.
Button:SetText("New text")
Toggle:Set(true)
Toggle:Get()
Slider:Set(50)
Slider:Get()
Dropdown:Set("Option")
Dropdown:Get()
Dropdown:Refresh({...})
Dropdown:Close()
Textbox:Set("Hello")
Textbox:Get()
Keybind:Set(Enum.KeyCode.F)
Keybind:Get()
Label:Set("New text")
FEEDBACK
Use the window notification system for messages, actions, errors, warnings or confirmations.
Window:Notify({
Title = "Vaultra",
Content = "Your action completed.",
Duration = 4
})
Window:Notify({
Title = "Success",
Content = "Everything is ready.",
Duration = 4,
Color = Color3.fromRGB(50, 221, 145)
})
By default, Vaultra UI creates a Home tab containing a welcome section and a live status section.
The status area automatically includes the server status, current
input type and network ping. You can add your own entries with
HomeStatuses.
local Window = Vaultra:CreateWindow({
Title = "Vaultra Hub",
HomeDescription = "Universal utilities powered by Vaultra UI.",
ServerStatus = "Online",
HomeStatuses = {
Version = "1.7.2",
Module = "Universal",
UI = tostring(Vaultra.Version)
}
})
HomeIcon = "⌂"
StatusSectionName = "Information"
Home = false
Window:SetHomeStatus("Status", "Running")
local CurrentStatus = Window:GetHomeStatus("Status")
print(CurrentStatus)
local CoinsStatus = Window:AddHomeStatus("Coins", 0)
CoinsStatus:Set(40)
Vaultra UI automatically creates a permanent Settings tab. Your
scripts can add more sections to it using
Window.SettingsTab.
The built-in Settings page contains background and window controls including:
Change the image, asset, decal or URL used by the window.
Switch between normal image and asset/thumbnail handling.
Controls how visible the background image is.
Controls the dark glass overlay.
Supports Crop, Fit and Stretch.
Lets the user change the UI toggle key.
Recalculates responsive scaling for the current viewport.
Moves the interface back to the middle of the screen.
local ExtraSettings = Window.SettingsTab:AddSection("Script settings")
ExtraSettings:AddToggle({
Name = "Notifications",
Default = true,
Callback = function(value)
print("Notifications:", value)
end
})
PERSISTENCE
Vaultra UI has two separate persistence systems.
Values assigned to Flag can be saved when
SaveSettings = true.
Vaultra appearance settings use their own save file when the required file APIs are available.
local Window = Vaultra:CreateWindow({
Title = "My Hub",
SaveSettings = true,
SaveFolder = "VaultraHub",
SaveName = "Settings"
})
General:AddToggle({
Name = "Auto Farm",
Default = false,
Flag = "AutoFarm",
Callback = function(value)
print(value)
end
})
General:AddSlider({
Name = "Speed",
Min = 1,
Max = 100,
Default = 20,
Flag = "Speed",
Callback = function(value)
print(value)
end
})
On the next execution, controls using the same flags can restore their previously saved values.
VaultraUI/Saves
BuiltInSaveFolder = "VaultraUI/BuiltInSettings"
Window:SaveSettings()
Window:ClearSavedSettings()
Window:SaveBuiltInSettings()
Window:ResetBuiltInSettings()
Saving requires file functions such as writefile and
readfile. Folder creation and deletion also depend on
the corresponding file APIs being available.
API
You can change several parts of an existing window without creating it again.
Window:Toggle()
Shows or hides the entire interface.
Window:Destroy()
Saves available settings and destroys the ScreenGui.
Window:Center()
Moves the window back to the screen center.
Window:Refit()
Recalculates scaling for the current viewport.
Window:SetScale(0.8)
Changes the UIScale while respecting screen limits.
Window:SetTransparency(0.5)
Changes the overall window/glass transparency.
Window:SetToggleKey(
Enum.KeyCode.RightShift
)
local Flags = Window:GetFlags()
Returns the current developer flag table.
Window:SetBackground("1020120447", "auto")
Window:SetBackgroundTransparency(0.08)
Window:SetTintTransparency(0.66)
Window:SetBackgroundScaleType(
Enum.ScaleType.Crop
)
KEY SYSTEM
Set Key = true to prevent the main interface from
opening until the user enters a valid key.
The key interface automatically adapts to smaller mobile displays and supports saving accepted keys where file APIs are available.
local Window = Vaultra:CreateWindow({
Title = "My Hub",
Key = true,
KeyTitle = "Vaultra Key System",
KeyDescription = "Enter your key below to continue.",
KeyPlaceholder = "Enter key...",
KeyLink = "https://vaultra.pages.dev/getkey",
KeyAPI = "https://vaultra.pages.dev/api/check?key={key}&user={userId}",
SaveKey = true,
KeySaveFolder = "VaultraUI",
KeySaveName = "MyHubKey"
})
The {key} placeholder is replaced with the entered key
and {userId} is replaced with the current Roblox user
ID.
If the API URL does not contain a {key} placeholder,
Vaultra automatically appends the key and user ID as query
parameters.
Key = true
Enables the key gate.
KeyTitle = "Key System"
KeyDescription =
"Enter a valid key."
KeyPlaceholder = "Enter key..."
KeyLink =
"https://vaultra.pages.dev/getkey"
SaveKey = true
Controls whether accepted keys can be remembered.
KeySaveFolder = "VaultraUI"
KeySaveName = "MyHubKey"
Saved keys are validated again when they are loaded. This means an expired API-generated key cannot simply bypass validation because it exists in the saved file.
Vaultra checks validation methods in priority order. The first configured method is used.
KeyCheck has the highest priority and gives your script
full control over key validation.
local Window = Vaultra:CreateWindow({
Title = "My Hub",
Key = true,
KeyCheck = function(key)
if key == "VAULTRA-123" then
return true, "Key accepted."
end
return false, "Invalid key."
end
})
local Window = Vaultra:CreateWindow({
Title = "My Hub",
Key = true,
KeyAPI = "https://example.com/api/check?key={key}&user={userId}"
})
API responses can be accepted when they indicate success using supported values such as a successful boolean or a JSON response containing a valid success field.
local Window = Vaultra:CreateWindow({
Title = "My Hub",
Key = true,
Keys = {
"VAULTRA-ONE",
"VAULTRA-TWO",
"VAULTRA-THREE"
}
})
local Window = Vaultra:CreateWindow({
Title = "My Hub",
Key = true,
KeyValue = "VAULTRA-ACCESS"
})
1. KeyCheck
2. KeyAPI
3. Keys
4. KeyValue
Open Vaultra key generator
ASSETS
The same image resolver is used by several Vaultra UI elements, including window backgrounds and image-based icons.
"123456789"
Treated as a normal image asset unless another type is requested.
"rbxassetid://123456789"
"rbxasset://..."
"decal://123456789"
Automatically resolved through an asset thumbnail.
"asset://123456789"
"thumbnail://123456789"
"rbxthumb://type=Asset&id=123456789&w=768&h=432"
"https://example.com/image.png"
Some Roblox IDs refer to decals or other asset types rather than a directly renderable image. Try the asset form:
Background = "asset://123456789"
or:
Background = "decal://123456789"
RESPONSIVE DESIGN
Vaultra UI is designed to work with both keyboard/mouse and touch input.
The full interface uses uniform scaling to preserve its layout and proportions on smaller displays.
Several interactive surfaces use larger dimensions when touch input is detected.
Normal UI text receives a mobile readability adjustment on touch devices.
Window movement includes touch thresholds to reduce accidental movement while controlling the Roblox camera.
Sliders use an enlarged invisible interaction area so they are easier to control on phones.
The key-system card automatically scales down on very small phone displays.
Vaultra recalculates its size when the viewport changes. You can also force this manually:
Window:Refit()
FULL SCRIPT
This example demonstrates a normal Vaultra UI window with saving, tabs, sections and every major control type.
local Vaultra = loadstring(
game:HttpGet("https://vaultra.pages.dev/ui.lua")
)()
local Window = Vaultra:CreateWindow({
Title = "Vaultra Hub",
Subtitle = "Example Script",
Background = "1020120447",
BackgroundType = "auto",
BackgroundTransparency = 0.08,
TintTransparency = 0.66,
ToggleKey = Enum.KeyCode.RightShift,
ServerStatus = "Online",
HomeDescription = "Example interface made with Vaultra UI.",
HomeStatuses = {
Version = "1.0.0",
Module = "Example",
UI = tostring(Vaultra.Version)
},
SaveSettings = true,
SaveFolder = "VaultraExample",
SaveName = "Settings"
})
-- Main tab
local Main = Window:CreateTab({
Name = "Main",
Icon = "◆"
})
-- General section
local General = Main:AddSection("General")
-- Paragraph
General:AddParagraph({
Title = "Welcome",
Content = "This page demonstrates the main Vaultra UI controls."
})
-- Divider
General:AddDivider("Controls")
-- Toggle
local EnabledToggle = General:AddToggle({
Name = "Enabled",
Description = "Turns the example feature on or off.",
Default = false,
Flag = "Enabled",
Callback = function(value)
print("Enabled:", value)
end
})
-- Slider
local SpeedSlider = General:AddSlider({
Name = "Speed",
Description = "Changes the example speed.",
Min = 1,
Max = 100,
Step = 1,
Default = 20,
Suffix = "",
Flag = "Speed",
Callback = function(value)
print("Speed:", value)
end
})
-- Dropdown
local ModeDropdown = General:AddDropdown({
Name = "Mode",
Description = "Select an example mode.",
Options = {
"Normal",
"Fast",
"Safe"
},
Default = "Normal",
AllowNone = false,
Flag = "Mode",
Callback = function(value)
print("Mode:", value)
end
})
-- Textbox
local MessageBox = General:AddTextbox({
Name = "Message",
Description = "Enter a custom message.",
Placeholder = "Type here...",
Default = "",
Flag = "Message",
Callback = function(value, enterPressed)
print("Message:", value)
end
})
-- Keybind
local ActionKey = General:AddKeybind({
Name = "Action Key",
Description = "Press the selected key to run an action.",
Default = Enum.KeyCode.F,
Flag = "ActionKey",
Changed = function(key)
print("Key changed to:", key.Name)
end,
Callback = function(key)
Window:Notify({
Title = "Keybind",
Content = key.Name .. " was pressed.",
Duration = 3
})
end
})
-- Label
local StatusLabel = General:AddLabel("Status: Ready")
-- Button
local NotifyButton = General:AddButton({
Name = "Test Notification",
Description = "Displays a Vaultra notification.",
ButtonText = "Notify",
Callback = function()
StatusLabel:Set("Status: Button pressed")
Window:Notify({
Title = "Vaultra",
Content = "The test button was pressed.",
Duration = 4
})
end
})
-- Extra tab
local Player = Window:CreateTab({
Name = "Player",
Icon = "★"
})
local PlayerSection = Player:AddSection("Player")
PlayerSection:AddParagraph({
Title = "Player",
Content = "Put player-related features here."
})
-- Add custom settings
local ScriptSettings =
Window.SettingsTab:AddSection("Script settings")
ScriptSettings:AddToggle({
Name = "Show Notifications",
Default = true,
Flag = "ShowNotifications",
Callback = function(value)
print("Notifications:", value)
end
})
-- Example Home status update
Window:SetHomeStatus("Status", "Ready")
local Vaultra = loadstring(
game:HttpGet("https://vaultra.pages.dev/ui.lua")
)()
local Window = Vaultra:CreateWindow({
Title = "Vaultra Hub",
Subtitle = "Protected Script",
Background = "1020120447",
BackgroundType = "auto",
BackgroundTransparency = 0.08,
TintTransparency = 0.66,
ToggleKey = Enum.KeyCode.RightShift,
Key = true,
KeyTitle = "Vaultra Key System",
KeyDescription = "Enter your Vaultra key to continue.",
KeyPlaceholder = "Enter key...",
KeyLink = "https://vaultra.pages.dev/getkey",
KeyAPI = "https://vaultra.pages.dev/api/check?key={key}&user={userId}",
SaveKey = true,
KeySaveFolder = "VaultraUI",
KeySaveName = "ExampleKey",
HomeDescription = "Protected Vaultra UI example.",
HomeStatuses = {
Version = "1.0.0",
UI = tostring(Vaultra.Version)
}
})
local Main = Window:CreateTab({
Name = "Main",
Icon = "◆"
})
local General = Main:AddSection("General")
General:AddButton({
Name = "Test",
ButtonText = "Run",
Callback = function()
Window:Notify({
Title = "Vaultra",
Content = "The script is unlocked and working.",
Duration = 4
})
end
})
GOOD PRACTICE
Give each saved control a unique flag so two controls do not overwrite the same saved value.
For large systems, call separate functions from UI callbacks instead of putting all feature code inside the control.
Save returned controls into variables when you need to change their values or text later.
Descriptions make complicated controls easier to understand and are also included in Vaultra's built-in search.
Split large tabs into logical sections instead of putting every control into one large group.
If an executor reports an incorrect viewport after loading,
Window:Refit() can recalculate the layout.
REFERENCE
-- Load
local Vaultra = loadstring(game:HttpGet("https://vaultra.pages.dev/ui.lua"))()
-- Window
local Window = Vaultra:CreateWindow({...})
-- Tabs
local Tab = Window:CreateTab({...})
-- Sections
local Section = Tab:AddSection("Name")
-- Controls
Section:AddButton({...})
Section:AddToggle({...})
Section:AddSlider({...})
Section:AddDropdown({...})
Section:AddTextbox({...})
Section:AddKeybind({...})
Section:AddLabel("Text")
Section:AddParagraph({...})
Section:AddDivider("Text")
-- Window
Window:Notify({...})
Window:Toggle()
Window:Center()
Window:Refit()
Window:Destroy()
Window:SetBackground(source, kind)
Window:SetBackgroundTransparency(value)
Window:SetTintTransparency(value)
Window:SetBackgroundScaleType(Enum.ScaleType.Crop)
Window:SetToggleKey(Enum.KeyCode.RightShift)
Window:SetTransparency(value)
Window:SetScale(value)
-- Flags
Window:GetFlags()
Window:SaveSettings()
Window:ClearSavedSettings()
-- Built-in settings
Window:SaveBuiltInSettings()
Window:ResetBuiltInSettings()
-- Home information
Window:AddHomeStatus(name, value)
Window:SetHomeStatus(name, value)
Window:GetHomeStatus(name)
-- Built-in Settings tab
Window.SettingsTab:AddSection("Custom Settings")